Vue-cli3.0动态配置本地/测试/线上环境

Jsky
2019-12-03 13:46:25
前端
Vue

环境说明

开发环境：是程序员开发使用的环境，配置比较随意，为了开发调试方便，一般打开全部错误报告
测试环境：克隆一份生产环境的配置，一个程序在测试环境工作不正常，那肯定不能把它发布到生产上
线上环境：正式提供对外的服务，也就是用户使用的环境，一般关闭所有错误报告，打开错误日志

package.json说明

在package.json文件中

...省略...
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
...省略...

这是我们通过vue-cli3创建项目时，默认的scripts设置，其中serve对应的是开发环境，build对应的是线上环境，测试环境的配置我们稍后再说。

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

当 npm run serve 时，process.env.NODE_ENV的值为development

当 npm run test 时，process.env.NODE_ENV的值为test （需在scripts手动添加test）

当 npm run build 时，process.env.NODE_ENV的值为production

默认情况下，当我们运行上述三种命令时NODE_ENV就会被设置成对应的值，虽然我们可以根据这个值来区分打包环境，但因为当NODE_ENV值为production时和其他模式打出的包结构和大小都不一样，为了其他模式打出的包和production模式的一样，我们建议使用自定义变量来区分环境，而把process.env.NODE_ENV的值都设置为production（会覆盖默认值）。

自定义变量命名规则

必须以 VUE_APP_ 开头

只有以 VUE_APP_ 开头的变量才会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：console.log(process.env.VUE_APP_ENVIRONMENT)

自定义打包环境步骤

1：在根目录创建 .env.xxx 文件

通过为 .env文件增加后缀来设置某个模式下的特有环境变量。

比如，在项目根目录创建名为.env.development 的文件，在这个文件里声明过的变量就只会在 development 模式下被载入

三种模式文件配置

  .env.development文件

  NODE_ENV = 'development'
  VUE_APP_ENVIRONMENT = 'development'

  .env.test文件（重写了NODE_ENV值）
 
  NODE_ENV = 'production'
  VUE_APP_ENVIRONMENT = 'test'

  .env.product文件

  NODE_ENV = 'production'
  VUE_APP_ENVIRONMENT = 'product'

注意：在.env.test和.env.product文件中NODE_ENV都设置成了production，目的是为了打出的包结构相同，而通过VUE_APP_ENVIRONMENT值来区分打包环境。

2：在package.json中通过 --mode 选项重写默认的模式

  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build --mode product"
  }

注意：–mode后边的名字必须和步骤1中 .env.xxx 的名字保持一致

3：创建配置文件，并根据不同环境分别进行配置

globalConfig.js文件
    
    let UA = navigator.userAgent.toLowerCase(), isIos = false, isWeixin = UA.indexOf('micromessenger') != -1;
    if (UA.match(/ipad/) || UA.match(/iphone/) || UA.match(/ipod/)) {
        isIos = true;
    }
    let globalConfig;
    if (process.env.VUE_APP_ENVIRONMENT == 'product') {
        globalConfig = {
            'token': isWeixin ? '12345' : '67890',
            'baseUrl': 'https://www.baidu.com'
        }
    } else if (process.env.VUE_APP_ENVIRONMENT == 'test') {
        globalConfig = {
            'token': '0987654321',
            'baseUrl': 'https://www.taobao.com'
        }
    } else if (process.env.VUE_APP_ENVIRONMENT == 'development') {
        globalConfig = {
            'token': '1234567890',
            'baseUrl': 'https://www.jd.com'
        }
    } else {
        globalConfig = {
            'token': '',
            'baseUrl': ''
        }
    }
    
    export default globalConfig;

在需要使用的的文件中直接导入 globalConfig 文件即可