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:///'
    }
});

在其他 js 中使用

​​axios.js​​

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

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