vue3中多环境配置打包

配置

在根目录下新建以下三个文件：

.env.development（开发环境）

NODE_ENV=development
VUE_APP_ENV = 'development'

.env.test（测试环境）

NODE_ENV=production
VUE_APP_ENV = 'test'

.env.production（生产环境）

NODE_ENV=production
VUE_APP_ENV = 'production'

注：自定义属性必须以 VUE_APP_ 开头

---

修改

修改 package.json 文件

    "scripts": {
    
    
        "dev": "vue-cli-service serve",
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "test": "vue-cli-service build --mode test"
    },

• 运行开发环境：npm run dev/serve
• 打包测试环境：npm run test
• 打包生产环境：npm run build

---

使用

通过上面自定义的 process.env.VUE_APP_ENV 判断环境

在 vue.config.js 中使用

vue.config.js

const {
    
     defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
    
    
    productionSourceMap: false,
    publicPath: '/',
    devServer: {
    
    
        port: 9500,
        proxy: process.env.VUE_APP_ENV === 'production' ? 'https://www.aaa.com/' : 'https://gateway.bbb.com/'
    }
});

在其他 js 中使用

axios.js

if (process.env.VUE_APP_ENV === 'development') {
    
     // 开发环境 - 编译

}
if (process.env.VUE_APP_ENV === 'test') {
    
     // 测试环境 - 打包
    axios.defaults.baseURL = 'https://www.bbb.com/';
}
if (process.env.VUE_APP_ENV === 'production') {
    
     // 生产环境 - 打包
    axios.defaults.baseURL = 'https://www.aaa.com/';
}