vue在index.js中判断是否为线上环境

好久没更啦，最近遇到一个问题，就是需要在管理系统里，做神策打点，然后需要判断是线上环境，还是测试环境，我定义了一个变量，

const NODE_DOMAIN = process.env.NODE_DOMAIN || 'development';

然后打包的时候用

NODE_DOMAIN=production npm run build;

解释一下之所以定义一个NODE_DOMAIN，而不用process.env.NODE_ENV，是因为，NODE_ENV只支持dev、production、test ；而我们公司还有app测试环境，所以就自定义了一个变量，引入方法在vue.config.js里

const NODE_DOMAIN = process.env.NODE_DOMAIN || 'development';
const webpack = require('webpack');

module.exports = {
    chainWebpack: config => {
        config
        .plugin('provide')
        .use(webpack.ProvidePlugin, [{
            feConfig: path.resolve(`./feConfig/${NODE_DOMAIN}.js`)
        }]);
    },
}

feConfig是一个文件夹，里边有三个四个文件，都定义了一个全局变量，这样引入之后，全局变量，就可以使用了；

言归正传，现在再说怎样在index.html里判断是哪个环境，就是，需要把index.html改成index.ejs，然后在里边判断

<% if(process.env.NODE_DOMAIN === 'prodection') %>
<script> </script>//引入某个文件
<% } else { %>
<script> </script>//引入另一个文件
<% } %>

也需要在vue.config.js里引入一个插件"html-webpack-plugin"，但是现在在vue-cli3里，就直接是html了，关于cli3以下的引入组件，就是

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'src/assets/index.ejs'
    })
]
//template是指你目录下的文件，注意这里是需要准确路径的
//filename是指要生成的文件，正常咱们都是index.html

但是在cli3里，需要这样引入

chainWebpack: config => {
    config.plugin('html').tap(args => {
        args[0].filename= 'index.html',
        args[0].template= './public/index.ejs',
        args[0].inject= true
        return args
    });
},
//这还是在那个链式调用里写

然后，打包的时候就会自己输入环境名称，.ejs里打包之后，判断就会生效了