Summary of practical skills of vue webpack

Use webpack to configure different interface addresses for production and publishing environments

During development, the front and back ends are separated and developed simultaneously. The interface given by the front-end calls the back-end is also inside the LAN. However, when the project is pushed online, the interface will be obtained from the real server and frequently switch between the test interface and the real interface, which is very disgusting.

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

Open the file. Modifications are as follows:

var merge = require('webpack-merge')
var prodEnv = require('./')

 = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"//192.168.1.8/api"' // Add api address})

Also in the file

 = {
 NODE_ENV: '"production"',
 API_ROOT: '"///api"'
}

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

For example, my: src/config/file

// The original API interface addressvar root = '/api/v1'

// Newly configured API interface addressvar root = .API_ROOT

at last

When npm run dev, the test interface is run. And we run

npm run build When packaging the project, the server's official interface is packaged