[vue]引入外部文件

这里的vue中引入外部文件，不是指在src的vue文件中引入独立的项目中的js文件，而是指非该项目中的文件，或者非打包范围（src目录下）的其它文件，因为需要引用外部文件中的变量，因为该变量是变化的，不能在该项目中确定该值，该文件根据条件最终被放置到打包后的dist文件夹中，因此不是项目中指定目录下的文件

此处外部文件是指文件打包后，被后来放置到打包的dist文件夹中的js文件，该文件之前不存在于项目中，或者不在打包范围之内

例如：dist/env.js

直接引用文件

可以在index.html文件中直接通过以下方式引入

注意不要添加type=“javascript”，否则全局变量的值不能被项目正常获取

但是这种直接引用的情况在本地开发的时候是存在问题的，因为本地开发的时候并没有env.js文件与index.html存在于同一个文件夹下，会报错，因此希望该外部文件可以根据条件进行引入

根据条件引入文件

如何在index.html文件中添加 script 引入js文件，开发环境下不引入

在vue.config.js文件中添加

const isPROD = (process.env.NODE_ENV == "production" || process.env.NODE_ENV == "prod");

用于确定当前环境是否是线上环境

修改或新增html-webpack-plugin的值，在index.html里面能读取htmlWebpackPlugin.options.title

    chainWebpack: config =>{
        config.plugin('html').tap(args => {
            args[0].title = '你想要设置的title';
	     args[0].online =isPROD;//通过该参数用于判断当前服务是否是本地开发环境
            return args;
        })
    }

然后在html文件body中，那么index.html只会在线上环境的时候加载env.js

  <% if (htmlWebpackPlugin.options.online) {%>
    <script type="text/javascript" src="<%= BASE_URL %>env.js"></script>
  <% } %>