Detailed explanation of vue webpack use cases

This time I will bring you a detailed explanation of the use cases of vue webpack. What are the precautions when using vue webpack. The following is a practical case, let's take a look.

Use webpack to configure different interface addresses for the production environment and release environment

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

Finally

npm run devWhen, the test interface is run. When we run

npm run build to package the project, what is packaged is the official server interface

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

Recommended reading:

react cooperates with antd components to create a backend system

Vue beforeEnter uses the hook function

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