前端工作答疑三-vue-cli-service build 环境设置

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

公司业务实现新的需求：在过去的版本中，由一套代码拉取了两条分支：A 与 B 作为业务平台，其中 A 分支是正常版本迭代的，B 分支在做了一些修改后稳定为对外平台，基本不去变动。两个分支从此出现差异。
后来新的需求来了，分支合成一个，实现差异化。
…
还能怎么办，干呗！！！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、配置文件

1.创建文件

在项目文件下新建 .env.tx 文件，与src文件夹同级。
在文件中写 ( tx 是 你起的名称，后面作为 computed 结果输出)

NODE_ENV = 'tx'
VUE_APP_CURRENTMODE = 'tx'

2.环境设置

官方文档说明.

"build-tx": "vue-cli-service build --mode tx",

2.小心接口

在 baseURL.js 文件中，看一下你的接口信息是否正确。

const urlMap = {
  tx: '/api'
}

3.在页面中使用

computed: {
    isTx() {
      return process.env.NODE_ENV == 'tx'
    }
  },

4.构建工具配置

不要忘记构建命令

npm run build-tx

这样就完成了

总结

当前方法相当于在不同的环境中运行，借助 VUE_APP_CURRENTMODE来区分差异化。

以上写法虽然可以暂时性的解决差异化问题，但后续的版本迭代还需要小心，对之后的开发不太友好（实际上已经翻车了），以上方法切记小心使用。