vue中配置生产环境和开发环境

• 在根目录下新建.env.test（测试环境）、env.development（开发环境）、.env.production文件（生产环境）
• 三个配置文件的配置内容如下：

1. .env.test（测试环境）配置内容

NODE_ENV = 'production'//用来表示是生产环境还是开发环境
VUE_APP_MODE = 'test'//用来表示是生产环境还是测试环境
VUE_APP_BASE_URL = http://ai.galaxyspaceai.com:18001/knowledge-graph-java/api    //这个地址不能带引号，不然获取的就带引号
outputDir = test//用来表示打包的名字

2. .env.development（开发环境）配置内容

NODE_ENV = 'development'
VUE_APP_MODE = 'development' 
VUE_APP_BASE_URL = http://192.168.50.13:10025/knowledge-graph-java/api

3. .env.production文件（生产环境）配置内容

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = http://ai.galaxyspaceai.com:18001/knowledge-graph-java/api

• 在package.json中添加打包

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test",//新添加，打包时，打包test环境
    "production": "vue-cli-service build --mode production",//新添加，打包时，打包production环境
    "development": "vue-cli-service build --mode development"//新添加，打包时，打包development环境
},

• 在vue.config.js中配置

module.exports = {
  // 基本路径,相对路径
  publicPath: "./",
  // 输出文件目录
  outputDir: process.env.outputDir,//使用定义的名字
}

• 在文件中可以使用console.log(process.env.VUE_APP_BASE_URL);

const instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL,
    timeout: 50000,
    headers: {
        'Content-Type': 'application/json'
    },
})

• 判断生产环境和开发环境

// 第一层if判断生产环境和开发环境
if (process.env.NODE_ENV === 'production') {
    // 第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境
    if (process.env.VUE_APP_FLAG === 'pro') {
        //production 生产环境
        
    } else {
        //test 测试环境
    }
} else {
    //dev 开发环境
    
}