vue项目不同环境使用不同配置

项目目录结构如下一、通过配置环境变量进行打包二、通过npm run build-xxx环境进行打包

项目目录结构如下

一、通过配置环境变量进行打包

新增配置vue.config.js到项目根目录，内容如下

module.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV === 'production', config=> { config.entry('app').clear().add('./src/main-prod.js') }) config.when(process.env.NODE_ENV === 'development', config=> { config.entry('app').clear().add('./src/main-dev.js') }) } }

新增main-prod.js和main-dev.js两个配置（项目根目录），这俩配置我这边只有后端域名配置不同，其他区别请自行发挥

main-dev.js axios.defaults.baseURL = 'http://127.0.0.1:8005/api/v1'; main-prod.js axios.defaults.baseURL = 'http://xxx.xxx.com/api/v1';

在打包前配置环境变量，这里以生产为例 export NODE_ENV=‘production’ 接着build即可区分配置文件 npm run build

二、通过npm run build-xxx环境进行打包

在package.json中scripts字段新增加配置

... "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build-dev": "vue-cli-service build --mode dev", // 新增 "build-prod": "vue-cli-service build --mode prod", //新增 "lint": "vue-cli-service lint" }, ...

新增.env.dev和.env.prod两个配置在根目录

.env.dev NODE_ENV = 'production' VUE_APP_BASE_URL = 'http://127.0.0.1:8005/api/v1' .env.prod NODE_ENV = 'production' VUE_APP_BASE_URL = 'http://xxx.xxx.com/api/v1'

在main.js中使用下列配置

// axios.defaults.baseURL = 'http://127.0.0.1:8005/api/v1'; axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;

通过不同的run build参数区分配置文件 npm run build-dev npm run build-prod

三、解决nginx部署刷新页面404问题

location / { root /stars-web/dist; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$ /index.html last; }