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

项目目录结构如下

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

新增配置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;
        }