近期同事接到一个略微罕见的请求，希望能在Vue项目中添加配置文件，以解决每一次环境搭建都需要修改请求IP然后再重新打包的问题。我知道有人想问为什么要频繁搭建新的后台环境，我当然是...不会告诉你们的。
必要性分析
刚听到这个需求的时候，我第一反应是：这个真的有必要吗？又不会真的天天换环境，况且比起环境搭建，build一次的时间占比其实是微乎其微的。没有但是，我第二反应也是第一次那么想的...
不过需求就是需求，再者后来也了解到每一次build都是我开发同事完成的然后发包给运维，这样对客户不是很友好，故开始认真思考这个问题。
思考历程
我首先想到的是需要搭建一个服务，不然js如何取读取配置文件呢？但读取了配置文件我又要怎么赋值给vuex（API公共的IP和端口都放到这里的）中的某个变量呢？并且还伴随着代码被压缩等问题... 所以很快我就放弃了这个打算。
a few minutes later，我想到可以用js充当配置文件，这样就不用去搭建一个服务读配置文件，而可以直接获取。本来需要配置的参数就是在vuex中写的，于是我想能不打包vuex这个问题不也就很好解决了吗。于是我在一个学习群中提问，不过并没有得到可行的方法，倒是提出了新增一个js，并在index.html中引用。我当时想： 但这样不是多余的文件吗？新增的这个文件还是需要解决不被打包这个问题。
之后去查（避免打包）这个问题，在segmentfault中看到/static/目录下的文件不会被打包，故选择了新增一个config.js作为配置文件（在/static/目录下）。
怎么做？
- 在Vue项目中的
/static/目录下新增文件config.js，用以存储一些可配置的参数。
config.js
- 在
index.html中引用该js,<script src="/static/config.js"></script> - 在eslintrc.js中设置全局变量，否则在使用时eslint会报错：
no-undef未定义变量。
eslint设置
-
这里设置的全局变量建议赋值给vuex中的某个变量声明，这样更容易理解，也不会混淆ES6的import\export语法。
vuex中应用全局变量，给状态量赋值
配置文件中的test属性就此生效，你可以在代码中把他打印到控制台测试。
打包后
config.js文件在/dist/static/目录下，如果你在其中配置了API的IP，那么当更换了服务器，则只需修改/dist/static/目录下的config.js就可以正常运行项目了。
网友评论
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 关闭不允许全局变量
'no-implicit-globals': 0
},
globals: {
'setting': true
}
在组件中访问依然是setting is not defined
其实道理很简单，你要使用一个js中定义的变量，那么就要先执行（script标签，import/require引用两种方式）这个js。