vue-cl-service不同环境运行/build配置

  概述

        在项目开发过程中，同一个项目在开发、测试、灰度、生产可能需要不同的配置信息，所以如果能根据环境的不同来设置参数很重要。

       vue项目的vue-cl-service插件也支持不同环境的不同参数配置和打包。

实现

新建不同环境配置文件

        vue项目中的配置文件以".env."开始，后面可以自定义环境名称。以开发、测试

、生产为例，新建“.env.development”、“.env.test”、“.evn.production”三个环境的配置文件。位置就位于项目目录下。

配置文件中以key=value的格式写如配置。

.env.development：

# 模式
NODE_ENV=development
# 服务器路径 
VUE_APP_backurl="http://localhost:7000"
# 打包后前端文件访问路径
VUE_APP_publicPath=/
#test-api路径
VUE_APP_testapi=http://localhost:7000

 .env.test：

# 测试环境配置

# 模式
NODE_ENV=test
# 服务器路径
VUE_APP_backurl="https://192.168.101.111:8080"
# 打包后前端文件访问路径
VUE_APP_publicPath=/demo-test/static
#test-api路径
VUE_APP_testapi=http://192.168.101.111:8080/test-api

.evn.production：

# 生产环境配置

# 模式
NODE_ENV=production
# 服务器路径
VUE_APP_backurl="https://cn.zhong.test/demo-pro"
# 打包后前端文件访问路径
VUE_APP_publicPath=/demo-pro/static
#test-api路径
VUE_APP_testapi=http://cn.zhong.test/test-api

配置环境启动和打包信息 

        vue-cl-service启动和打包项目的配置都是在package-json中。其中"vue-cli-service serve"表示启动命令，“vue-cli-service build”表示打包命令。后面跟参数--mode=xxxx，表示环境配置信息。

{
  "name": "si-demo-front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    //测试环境配置信息启动
    "serve-test": "vue-cli-service serve --mode=test",
    //生产环境配置信息启动
    "serve-pro": "vue-cli-service serve --mode=production",
    //测试环境配置信息构建
    "build-test": "vue-cli-service build --mode=test",
    //生产环境配置信息构建
    "build-pro": "vue-cli-service build --mode=production",
    "lint": "vue-cli-service lint"
  },
  ...
 }

代码中使用环境信息

        在代码中使用process.env.xxx（xxx是配置文件的key）可以访问到具体配置文件中的配置变量，例如使用process.env.NODE_ENV可以访问到当前启动环境配置中的NODE_ENV变量信息。其他信息也是一样。