How to manage the backend interface address in the Vue project built by Webpack

In the recently done Vue project, using the Webpack Packaging tool, previously in the project test environment and production environment interface address is the same, because the interface address is not the same, need to manually switch the different address when the project is packaged, sometimes forget to switch to RePack, back and forth is very troublesome, Today, online to see a good way to solve this problem, but also because of the Webpack tool is not very understanding, in fact, this tool has provided a solution.

Reference website: http://blog.csdn.net/gebitan505/article/details/58166055;

In the Config folder there are three JS files, respectively, Dev.env.js,index.js and Prod.env.js, respectively, representing the test environment configuration information, the main configuration information, production environment configuration information.

Open the Dev.env.js file; NODE_ENV Add an entry below with the following code:

var merge = require (' Webpack-merge ')var prodenv = require ('./prod.env '= Merge (prodenv, {  ' "Development" ',  ' "//192.168.1.8/api" '//interface of the test Environment })

Then, in the edit prod.env.js file, the code is as follows

Module.exports = {  ' "Production" ',  ' "//www.baidu.com/api" '//Interface for production environment }

Finally, the ROOT URL of the setting is changed to: Process.env.API_ROOT,

For example, let Rooturl = "http://test.api.com" is changed to let Rooturl = Process.env.API_ROOT;

Webpack in the local testing of the use of the test interface, packaging will automatically replace the interface with the interface of the production environment;

How to manage the backend interface address in the Vue project built by Webpack