How to use vue webpack

This time I will show you how to use vue webpack, what are the precautions for using vue webpack, the following is a practical case, let's take a look.

During development, the front-end and back-end are developed simultaneously. The interface provided by the front end to call the back end is also within the LAN. However, when the project is pushed online, the interface will be obtained from the real server, and frequent switching between the test interface and the real interface is very disgusting.

The first step is to set different interface addresses in the webpack configuration file

Open the dev.en.js file. Modify as follows:

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"//192.168.1.8/api"' // 添加api地址
})

Also in the prod.env.js file

module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"//www.baidu.com/api"'
}

The second step is to call the set parameters in the code

For example, mine: src/ config/api.js file

// 原来的API接口地址
var root = 'https://cnodejs.org/api/v1'

// 新配置的API接口地址
var root = process.env.API_ROOT

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How Vue implements the beforeEnter hook function

Summary of js image conversion to base64 method

The above is the detailed content of How to use vue webpack. For more information, please follow other related articles on the PHP Chinese website!