vue从外部配置文件读取服务器地址,vue实现外部配置文件

需求：实现不重新打包修改loading文案，以及颜色。

思路：

1.需要webpack打包是不将自己定义的配置文件打包，这就需要我们将自定义的配置文件放到public里面(vue-cli3搭建的项目)，如果是vue-cli2搭建的项目则需要将文件放到static里面。

2.需要打包后不会，将内容写死到打包后的文件中。如果是该图片直接使用require就好。在img标签的src中如下

然后想要修改是直接将dist中的图片换掉就好(注意：替换后的图片名要与原图片名一致(保证其哈希值一样，不然会报错))图片这么干是可以的，=========》但是如果是用require去读取js文件中暴露的对象则不行(网上百度出来的方法)，亲测打包后无法修改，也可能是我弄错了吧

3.气急败坏下只能使用暴力方法了(希望有大佬能够交点不那么蠢的方法)。。。。。。。(直接利用localStorage浏览器缓存)

具体实现如下：

1.在public中创建config.js文件

const config = {

loadingText: "测试",

loadingTextcolor: 'rgb(37, 146, 204)'

}

window.localStorage.setItem('config', window.JSON.stringify(config))

2.在index.html中使用config.js

3.组件内直接读取localStorage中的数据，至此就实现了外部配置。

坑： 在浏览器打开dist文件后会有缓存，这是我们如果重新配置了config.js中的数据，需要清除浏览器缓存后再运行。包括图片的外部修改也是一样的

解决方案：

错误示范：

我们在index.html文件引入配置文件时在资源路径后加上时间戳，(如果加时间戳你使用字符串模板会有坑，像这样

script.src = `./config/loadingConfig.js?t=${ new Date().getTime()}`

会在打包的时候就将你的获取时间戳方法直接替换成时间字符串进行拼接

正解：

这个·时候我们可以直接使用字符串拼接的方法像这样：

script.src = "./config/loadingConfig.js?t=" + new Date().getTime();

如此做就不会有问题了。

到此完美解决，奥利给！！！虽然看起来可能比较暴力，但解决了不是？忘有大佬指点！