关于vue-cli3.x/4.x静态入口页面index.html根据开发 、测试、生产环境内容变化的处理（2020.3）

本篇介绍或者说记录一下2020年3月用到的一个知识，index.html根据不用环境变化内容。

场景：外部插件只能在index.html中引入，且开发、测试环境引入的地址与生产环境不一样

处理：1、检查环境的配置：src\config\的环境配置，例如env.js，代码如下：

const env = process.env
if (env.NODE_ENV == 'development') {
    baseUrl = ``; // 开发环境地址
} else if (env.NODE_ENV == 'production') {
    baseUrl = ``; //生产环境地址
} else if (env.NODE_ENV == 'test') {
    baseUrl = ``; //测试环境地址
}
export {
    env
}

2、打开public/index.html，在需要切换内容的地方处理，例如：

<% if (process.env.NODE_ENV === 'development' ) { %>
    <script type="text/javascript" src="xxxxxxxxxxxx"></script>
  <% } %>
  <% if (process.env.NODE_ENV === 'production' ) { %>
    <script type="text/javascript" src="yyyyyyyyyyy"></script>
  <% } %>

这种方法可以引用vue工程本身的环境配置，而且编码简单，易用。