在Vue中通过添加配置文件维护全局变量

交流 java编程交流
0 / 474

必要性分析

项目中很多时候需要使用到全局变量。如果不通过配置文件进行配置,则需要在每次使用时进行获取,如果某个变量发生变化,需要逐个文件进行查找替换,有可能会出现遗漏,所以使用配置文件配置非常有必要!

实现过程

我首先想到的是需要搭建一个服务,不然 js 如何取读取文件呢?启一个读配置的服务,但我又要怎么将配置赋值给 vuex(接口公共的 IP 和端口都放到这里的)中的某个变量呢?是的变量替换,但是变量替换又涉及打包后代码变量已经不能识别问题...

a few minutes later,我想到可以用 js 充当配置文件,这样就可以直接获取配置,那么剩下的问题就是如何避免该文件被打包。正好当时又在 segmentfault 中看到有人说/static/目录不会被 webpack 打包,那么思路就清晰了:在/static/目录下 ** 新增一个 config.js 作为配置公共参数的文件,然后在项目中引用。

具体过程

  1. 在 Vue 项目中的/static/目录下新增文件config.js,用以存储一些可配置的参数。
    image.png
  2. index.html中引用该 js,<script src="/static/config.js"></script>
  3. 在 eslintrc.js 中设置全局变量,否则在使用时 eslint 会报错: no-undef未定义变量。

image.png

  1. 这里设置的全局变量可以赋值给 vuex 中的某个变量声明,这样更容易理解,别人也就不会疑惑 config 从哪里来。 image.png

  2. 通过上面的配置, 配置文件中的config.test就已经能在项目中使用了。

  3. 打包后config.js文件在/dist/static/目录下,如果你在其中配置了接口的 IP,那么当更换了服务器,则只需修改/dist/static/目录下的config.js就可以正常运行项目了。

回复
    发表话题
    不败顽童
    为了最后的荣誉!!!!
    • 积分
      12
    • 注册排名
      3