vue cli构建项目下环境控制与区分

vue cli构建项目下环境控制与区分

通常，项目中分为三个环境 development 、production、test ，根据不同的环境应该有不同的依赖、导出，包括环境变量等等。在对项目中的一些内容进行封装时候，就应该加以区分环境变量。通常有三种方法加以区分

1. 控制所有需要变换的环境变量到一个文件，当处于哪一种环境下就注释其余两种环境变量。

   例如：

   // development
   BASE_HOST = 'http://localhost'
   BASE_PORT = '8080'
   ​
   // production
   // BASE_HOST = 'http://localhost'
   // BASE_PORT = '6080'
   ​
   // test
   // BASE_HOST = 'http://localhost'
   // BASE_PORT = '7070'
   

2. 通过自定义的环境变量 process.env.NODE_ENV 进行识别（推荐）。

   首先需要了解什么是process.env.NODE_ENV。process是nodejs环境下的提供的有关当前进程信息的对象。而process.env属性是包含用户环境的对象。在webpack中，定义了process.env.NODE_ENV来区分用户当前的环境。同时vue cli使用了DefinePlugin插件帮助开发者配置了process.env.NODE_ENV环境变量，并自带了三种环境。

   • development：在vue-cli-service serve下，即开发环境使用
   • production：在vue-cli-service build和vue-cli-service test:e2e下，即正式环境使用
   • test： 在vue-cli-service test:unit下使用

   那么就可以通过它来判断。

   if (process.env.NODE_ENV === 'development') {
     // development
     BASE_HOST = 'http://localhost'
     BASE_PORT = '8080'
   } else if (process.env.NODE_ENV === 'production') {
     // production
     BASE_HOST = 'http://localhost'
     BASE_PORT = '6080'
   } else {
     // test
     BASE_HOST = 'http://localhost'
     BASE_PORT = '7070'
   }
   

3. 通过vue cli配置。

   在项目根目录中放置下列文件来指定环境变量：

   .env                # 在所有的环境中被载入
   .env.local          # 在所有的环境中被载入，但会被 git 忽略
   .env.[mode]         # 只在指定的模式中被载入
   .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
   

   那在这里，通常可以创建三个文件。

   • .env.development：开发环境
   • .env.production：生产环境
   • .env.test：测试

   注意。vue cli对NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中，并且以

   "键=值"对的方式进行存储。届时被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。

   // .env.development
   VUE_APP_BASE_HOST = 'http://localhost'
   VUE_APP_BASE_PORT = '8080'
   

   // .env.productiong
   VUE_APP_BASE_HOST = 'http://localhost'
   VUE_APP_BASE_PORT = '6080'
   

   // .env.test
   VUE_APP_BASE_HOST = 'http://localhost'
   VUE_APP_BASE_PORT = '7070'
   

   并可以直接读取。

   console.log(process.env.NODE_ENV)