为Vue项目添加配置文件,便于维护全局变量
https://www.jianshu.com/p/eb8aa239be07为Vue项目添加配置文件,便于维护全局变量歇歇关注0.52018.02.05 15:15*字数 688阅读 8332评论 16喜欢 6近期同事接到一个略微罕见的请求,希望能在Vue项目中添加配置文件,以解决每一次环境搭建都需要修改请求IP然后再重新打包的问题。我知道有人想问为什么要频繁搭建新的后...
https://www.jianshu.com/p/eb8aa239be07
为Vue项目添加配置文件,便于维护全局变量
歇歇 关注
0.5 2018.02.05 15:15* 字数 688 阅读 8332评论 16喜欢 6
近期同事接到一个略微罕见的请求,希望能在Vue项目中添加配置文件,以解决每一次环境搭建都需要修改请求IP然后再重新打包的问题。我知道有人想问为什么要频繁搭建新的后台环境,我当然是...不会告诉你们的。
必要性分析
刚听到这个需求的时候,我第一反应是:这个真的有必要吗?又不会真的天天换环境,况且比起环境搭建,build一次的时间占比其实是微乎其微的。没有但是,我第二反应也是第一次那么想的...
不过需求就是需求,再者后来也了解到每一次build都是我开发同事完成的然后发包给运维,这样对客户不是很友好,故开始认真思考这个问题。
思考历程
我首先想到的是需要搭建一个服务,不然js如何取读取文件呢?启一个读配置的服务,但我又要怎么将配置赋值给vuex(接口公共的IP和端口都放到这里的)中的某个变量呢?是的变量替换,但是变量替换又涉及打包后代码变量已经不能识别问题...
a few minutes later,我想到可以用js充当配置文件,这样就可以直接获取配置,那么剩下的问题就是如何避免该文件被打包。正好当时又在segmentfault中看到有人说/static/
目录不会被webpack打包,那么思路就清晰了:在/static/
目录下**新增一个config.js作为配置公共参数的文件,然后在项目中引用。
怎么做?
- 在Vue项目中的
/static/
目录下新增文件config.js
,用以存储一些可配置的参数。config.js
- 在
index.html
中引用该js,<script src="/static/config.js"></script>
- 在eslintrc.js中设置全局变量,否则在使用时eslint会报错:
no-undef
未定义变量。eslint设置
-
这里设置的全局变量可以赋值给vuex中的某个变量声明,这样更容易理解,别人也就不会疑惑config从哪里来。
vuex中应用全局变量,给状态量赋值
配置文件中的config.test
就已经能在项目中使用了。
打包后
config.js
文件在/dist/static/
目录下,如果你在其中配置了接口的IP,那么当更换了服务器,则只需修改/dist/static/
目录下的config.js
就可以正常运行项目了。
更多推荐
所有评论(0)