vue项目配置不同的环境变量

由于项目要求 部署不同的环境及目录，为了方便打包与部署，配置不同的开发环境变量与部署路径

1.创建项目

vue create demo
cd demo
npm run serve  //运行项目

2.在项目目录创建不同的环境文件 NODE_ENV = production声明开发环境，若不声明打包后的内容是 1.js… 没有混淆
.env.dev //开发环境

NODE_ENV = development
VUE_APP_BASE_API = https://www.development.com.cn //具体变量以实际项目为准

.env.test //测试环境

NODE_ENV = test
VUE_APP_BASE_API = https://www.test.com.cn //具体变量以实际项目为准

.env.pro //正式环境

NODE_ENV = production
VUE_APP_BASE_API =  https://www.production.com.cn //具体变量以实际项目为准

如果有需要配置多行变量，需以VUE_APP 开头

3.修改package.json文件中的scripts
原配置

"scripts": {
    "serve": "vue-cli-service serve",  //项目开发环境运行
    "build": "vue-cli-service build"  //项目打包
  },

修改配置

"scripts": {
        "serve": "vue-cli-service serve  --mode dev",  //运行开发环境 
        "dev": "vue-cli-service serve --mode dev", //运行开发环境
        "test": "vue-cli-service serve --mode test",  //运行测试环境
        "build": "vue-cli-service build --mode prod",  //打包正式环境
        "build:test": "vue-cli-service build --mode test", //打包测试环境
    },

重点 --mode后面的变量与文件.env.后面dev/test/prod相对应要一致

4.重启项目查看
a.启动开发环境

 npm run dev 

5.定义不同环境下的路由路径和打包路径
测试环境 需要部署到 /test 非根目录
创建vue.config.js
module.exports = {
publicPath: ‘/test/’ //直接配置
}
运行项目

npm run test

6.路由非根目录的配置

const router = new VueRouter({
  mode: 'history',
  base: process.env.NODE_ENV=='test'?'/test':'', // 也可配置process.env.BASE_URL
  routes
})