【vue-cli】部署环境配置问题

采用前后端分离，所以在开发和部署的过程中，后台接口的域名、 第三方登录的URL等其他第三方链接地址等常量存在切换问题，每次打包都要修改很麻烦。

1.主要技术要点

1.1.process.env

process.env就是Nodejs提供的一个API，它返回一个包含用户环境信息的对象。如果我们给Nodejs 设置一个环境变量，并把它挂载在 process.env 返回的对象上，便可以在代码中进行相应的环境判断。具体操作看下面分析。
（1）使用要点
新建一个环境变量NODE_ENV（自定义），用它确定当前所处的开发阶段，生产阶段设为production，开发阶段设为development或staging，然后在脚本中读取process.env.NODE_ENV即可。
（2）定义环境变量
定义的时候有三种方式：
一：js代码定义配置
比如在打包配置文件build.js中定义为生产环境

process.env.NODE_ENV = 'production'

二：在cmd环境配置
Windows配置-临时配置

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在 
set NODE_ENV 
#如果不存在则添加环境变量 
set NODE_ENV=production 
#环境变量追加值 set 变量名=%变量名%;变量内容 
set path=%path%;C:\web;C:\Tools 
#某些时候需要删除环境变量 
set NODE_ENV=

Linux配置-临时配置

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在
echo $NODE_ENV
#如果不存在则添加环境变量
export NODE_ENV=production
#环境变量追加值
export path=$path:/home/download:/usr/local/
#某些时候需要删除环境变量
unset NODE_ENV
#某些时候需要显示所有的环境变量
env

三：package.json中配置
webpack项目里，我们可以通过设置package.json来实现，但是Windows 系统和Mac系统有区别。
Windows 系统

// package.json
{
  ...
  "scripts": {
    "dev": "set NODE_ENV=development &&  webpack-dev-server --open --hot",
    "build": "set NODE_ENV=production &&   --progress --hide-modules"
  }
}

Mac 系统

// package.json
{
  ...
  "scripts": {
    "dev": "export NODE_ENV=development &&  webpack-dev-server --open --hot",
    "build": "export NODE_ENV=production &&   --progress --hide-modules"
  }
}

cross-env是一个跨平台设置环境变量的第三方包，它可以让你只配置一行命令，就能轻松地在多个平台设置环境变量。可以解决上述平台问题，改插件需要先安装：

npm install --save-dev cross-env 

// package.json
{
  ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --mode=production  --progress --hide-modules"
  },
}

通过process.env.NODE_ENV（process是node全局)，直接用就行了）
（3）环境判断
通过环境变量判断当前环境，加载对应的系统配置信息
（1）在index.html中判断加载配置

  <% if (process.env.NODE_ENV === 'production') { %>
  
  
  
  <% }else { %>
  
  
  
  
  <% } %>

（2）在JS代码中判断

/**
 * 请求地址处理
 * @param {*} actionName action方法名称
 */
http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

1.2 引入Js文件，不进行编译打包

把配置信息放在Js文件中，该文件不进行编译打包，比如在首页html文件中引入配置文件Js

通过script引入，如果是import方式引入，就会经过webpack打包编译。

2.具体实现

（1）前端系统配置信息文件独立
新建配置信息文件systemConfig.js，该配置文件独立项目代码外，不会通过vue-cli进行编译打包，完全由运维人员根据发布环境进行配置，然后放入发布的指定目录。运维人员提交代码发布包时不会覆盖配置文件。

const systemConfig = {
  //api接口请求地址
  baseUrl: "http://10.150.24.100/erp2/cw/service/ERPII"
}

（2）配置文件加载

  <% if (process.env.NODE_ENV === 'production') { %>
  
  
  
  <% }else { %>
  
  
  
  
  <% } %>

（3）使用配置文件
因为导入到index.html，所以在文件的每个地方都可以去访问到systemConfig.js中的常量（这个不用讲都知道）

//index-prod.js生产环境代码使用配置信息
; (function () {
  window.SITE_CONFIG = {}
  // api接口请求地址
  // eslint-disable-next-line no-undef
  window.SITE_CONFIG['baseUrl'] = systemConfig.baseUrl/
})()