How to use vue+webpack to make a project (with code)

This time I will show you how to use vue webpack to make a project (with code), and what are the precautions for using vue webpack to make a project. 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 and back ends 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:

React application development scaffolding use case

How to use js to convert images to base64

The above is the detailed content of How to use vue+webpack to make a project (with code). For more information, please follow other related articles on the PHP Chinese website!