需求

项目会有很多环境，比如最常用会有一下环境，
develop：本地开发环境
alpha：测试/预发布环境
production：正式/生产环境
不同环境下，打包、部署和 API 的调用都是不同的。
如果每次都频繁修改代码，明显是不理智的
按照命令调用不同配置文件启动呢？

使用

1、在 package.json 新增命令脚本

  1. "scripts": {
  2.     "serve": "vue-cli-service serve",
  3.     "build": "vue-cli-service build",
  4.     "lint": "vue-cli-service lint",
  5.     "serve:alpha": "vue-cli-service serve --mode alphaser",
  6.     "build:alpha": "vue-cli-service build --mode alpha"
  7.   },

2、在项目根目录下，新增配置文件

  1. #    env.alpha
  2. #    env.development
  3. #     env.production

—mode alpha 意思为指定环境模式为alpha ,会调用 .env.alpha 文件。默认不指定则为development。所以我们建立多个配置文件
.env.alpha

  1. NODE_ENV = development
  2. BASE_URL = /
  3. VUE_APP_ENV = development
  4. VUE_APP_ENV_CHN = 前端环境：本地开发环境。 后端环境：测试服环境
  5. VUE_APP_SERVER = https://t-12368-h5.aegis-info.com/casservice/web/v1/

.env.production

  1. NODE_ENV = production
  2. BASE_URL = /caspage/
  3. VUE_APP_ENV = production
  4. VUE_APP_ENV_CHN = 前端环境：正式环境。 后端环境：正式服环境
  5. VUE_APP_SERVER = https://shandong-12368.aegis-info.com/casservice

然后对vue项目改造

vue.config.js 文件

  • 动态配置打包的路径和目录（即项目内所有的请求链接地址都是publicPath）
  • 本地开发代理地址proxy
    1. module.exports = {
    2. publicPath: process.env.BASE_URL,
    3. devServer: {
    4.   proxy: process.env.VUE_APP_SERVER
    5. }
    6. };

    Axios 配置

    1. // 本地会自动走vue.config.js里的代理地址，不需要配置baseUrl。否则代理会失效
    2. if (process.env.VUE_APP_ENV !== 'development') {
    3. axios.defaults.baseURL = process.env.VUE_APP_SERVER;
    4. }

    history模式 配置

    配置路由，因为服务器可能不一定将你的项目放在根目录下
    1. const router = new VueRouter({
    2. mode: 'history',
    3. base: process.env.BASE_URL,
    4. routes
    5. })

    vue-cli 3.0版本配置环境

    1、新建 vue.config.js 文件

    2、新建 config 文件夹，存放 环境配置文件：pro.env.js（生产环境配置），uat.env.js（测试环境配置）, dev.env.js（本地环境）

    文件内容：
    1. // 生产环境
    2. module.exports = {
    3.   NODE_ENV: '"production"',
    4.   hosturl:''
    5. }
    1. // 测试环境
    2. module.exports = {
    3.   NODE_ENV: '"test"',
    4.   hosturl:''
    5. }
    1. const hosturl= '';
    2. // 本地环境
    3. module.exports = {
    4.   NODE_ENV: '"development"',
    5.   hosturl:hosturl
    6. }

    3、vue.config.js 内容配置

    ```js var path = require(‘path’); const devProxy = [‘/pc’,’/weixin’,’android’,…]; // 代理 var proEnv = require(‘./config/pro.env’); // 生产环境 var uatEnv = require(‘./config/uat.env’); // 测试环境 var devEnv = require(‘./config/dev.env’); // 本地环境 const env = process.env.NODE_ENV; let target = ‘’;

    对项目环境的 判断

    // 默认是本地环境 if(env===’production’){ // 生产环境 target = proEnv.hosturl; }else if(env===’test’){ // 测试环境 target = uatEnv.hosturl; }else{ // 本地环境 target = devEnv.hosturl; }

    生成代理配置对象

    let proxyObj = {}; devProxy.forEach((value, index) => { proxyObj[value] = {
    1.   target: target,
    2.   changeOrigin: true,
    3.   pathRewrite: {
  1.         [`^${value}`]: value
  2.     }
  3. };

}); module.exports = { baseUrl: ‘/‘, outputDir: ‘dist’, devServer: { // open: process.platform === ‘darwin’, host: ‘0.0.0.0’, port: 8080, https: false, hotOnly: false, disableHostCheck: true, # 配置反向代理 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy proxy: proxyObj, // string | Object before: app => {} } };

  1. <a name="DTGxm"></a>
  2. ### 4、package.json 文件配置
  3. ```json
  4. "scripts": {
  5.     "dev": "vue-cli-service serve --open",
  6.     "prod":"vue-cli-service build --mode=production",
  7.     "uat": "vue-cli-service build --mode=test" 
  8.   },

serve 和build 的区别

serve 是服务命令，build是用于打包用的，比如 npm run dev ,可以在浏览器上直接浏览页面，prod和uat 这两个就只能在本地打好包，然后放到服务器上，访问网址才能看到。
代理 不同环境 走不同的target就配置好了。

5、注意

cli-service 服务命令，默认情况下必须有一个development

  1. --open    open browser on server start
  2.   --mode    specify env mode (default: development)
  3.   --host    specify host (default: 0.0.0.0)
  4.   --port    specify port (default: 8080)
  5.   --https   use https (default: false)

模式

模式是 Vue CLI 项目中的一个重要概念。默认情况下，Vue CLI项目中有三种模式：

  • development 用于 vue-cli-service serve
  • production 被vue-cli-service build和使用vue-cli-service test:e2e
  • test 用于 vue-cli-service test:unit

请注意，模式不同NODE_ENV，因为模式可以包含多个环境变量。也就是说，NODE_ENV默认情况下每个模式都设置为相同的值 - 例如，NODE_ENV将设置为”development”开发模式。
您可以通过后缀.env文件来设置仅适用于特定模式的环境变量。例如，如果创建.env.development在项目根目录中命名的文件，则在该文件中声明的变量将仅在开发模式下加载。
您可以通过传递—mode选项标志来覆盖用于命令的默认模式。例如，如果要在build命令中使用开发变量，请将其添加到package.json脚本中：
“dev-build”: “vue-cli-service build —mode development”,
示例：分段模式
假设我们有一个包含以下.env文件的应用：

  1. VUE_APP_TITLE=My App

以下.env.staging文件：

  1. NODE_ENV=production
  2. VUE_APP_TITLE=My App (staging)

vue-cli-service build建立一个生产应用程序，装载 .env，.env.production以及.env.production.local如果它们存在;
vue-cli-service build —mode staging建立在分段模式中，使用生产应用.env，.env.staging以及.env.staging.local如果它们存在。
在这两种情况下，应用程序都是作为生产应用程序构建的，因为NODE_ENV它在暂存版本中process.env.VUE_APP_TITLE会被不同的值覆盖。

参考文档：

vue不同环境下的配置
vue-cli 3.0版本，配置代理Proxy，不同环境不同target（生产环境，uat环境和本地环境的配置）
vue相关配置文件详解及多环境配置详细步骤
vue config.js配置生产环境和发布环境不同的接口地址问题
vue多环境配置方案
vue-cli2多环境配置