vue-cli3 configuration development environment, test environment, online environment [to be modified]

001, add in the package.json file

"scripts": {
    "serve": "vue-cli-service serve", // Call the development API
    "build": "vue-cli-service build", //上线
    "test": "vue-cli-service build --mode test", // What needs to be added, test
},

002. Create an .env file in the root directory and configure

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro' // Vue code can directly use the name VUE_APP_

003. Create an .env.test file in the root directory

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test // You can change the directory name output during packaging, the default is dist

004. Create vue.config.js in the root directory

module.express = {
baseUrl: process.env.NODE_ENV === 'production' ? '/static/' : './',
devServe: {
port: 8080,
// disableHostCheck: true, // deal with the problem that host does not recognize
},
baseUrl: '/', // base path, don't change it at will
outputDir: process.env.outputDir, // packaging and generating directory
assetDir: 'static',
lintOnSave: false,
runtimeCompiler: true, // Whether to use the Vue build version that includes the runtime compiler
productionSourceMap: false, // source map of production environment

}

005. Configure api variables in main.js

/ * The first layer of if judges the production environment and development environment * /
if (process.env.NODE_ENV === 'production') {
    / * The second layer of if, according to the VUE_APP_FLAG in the .env file to determine whether it is a production environment or a test environment * /
    if (process.env.VUE_APP_FLAG === 'pro') {
        // production production environment
        axios.defaults.baseURL = 'http: //api.xinggeyun.com'; // 路径

    } else {
        // test test environment
        axios.defaults.baseURL = 'http://192.168.0.152:8102';//path

}} else {// dev development environment axios.defaults.baseURL = 'http://192.168.0.152:8102';//path

 }

Finally npm run test or yarn run test  

ps: I used outputDir = test, but it is still the default file name of dist after packaging. I do n’t know the reason. If you know, please share

Finally, I hope to help you! !

Original: https://blog.csdn.net/qq_37055675/article/details/85047451

You can refer to: https://juejin.im/post/5c63afd56fb9a049b41cf5f4