环境说明

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

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 文件即可

为什么不把token、baseUrl等变量直接设置到 .env.xxx 文件呢?

  • 设置在 .env.xxx 的变量如果修改则必须重新运行npm,而放在globalConfig中则不需要
  • 设置在 .env.xxx 的变量必须设置对应值,而放在globalConfig中的变量还可以对应三元运算符(比如:根据手机系统(Android、IOS)的不同设置不同的值)

只根据NODE_ENV打出的不同的环境的包,都有哪些不同?

首先需要把之前创建的 .env.test文件 中的 NODE_ENV 的值设置为test,然后分别运行npm run build 和 npm run test
对比两种模式打出的包结构,如图
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐