Practical analysis of vue+webpack project

This time I will bring you a practical analysis of the vue webpack project. What are the precautions for using the vue webpack project? 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

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:

How to bind arrow keys to control div movement

##font-awesome font packaging use case analysis ( Code attached)

The above is the detailed content of Practical analysis of vue+webpack project. For more information, please follow other related articles on the PHP Chinese website!