VUE-CLI three ways to use Webpack to configure different interface addresses for production and release environments

The first method :

Under/config/dev. env. JS is configured as follows

Under/config/prod. env. JS is configured as follows

The path has been set separately, and the next question is how to invoke it.

The code in the original API file

Revision changed to

Then we finished our configuration work. Finally, restarting the project will enable the newly configured interface address to take effect.

After such a configuration, we are running

npm run dev

, running is the interface of the development environment. And we run

npm run build

When packaging the project, the packaging is the official interface of the server, we do not have to tune to get it.

The second method:

You can use the library "cross-env": "^3.1.3".

Two commands are also required in Package.json:

"scripts": {  "dev": "cross-env NODE_ENV=developmentHot node tasks/runner.js",  "pack": "cross-env NODE_ENV=developmentPack node tasks/runner.js",}
在代码中可以这样使用

The third method:

Use Defineplugin in Webpack.config.js:

if (process.env.NODE_ENV !== ‘developmentHot‘) {  webpackConfig.plugins.push(    new webpack.DefinePlugin({      __DEFINE_XXX__: JSON.stringify(true)    })  )}
In the Code

In the code:

Please use your phone "sweep" x

VUE-CLI three ways to use Webpack to configure different interface addresses for production and release environments