vue项目中，不需前端编译打包，随时修改维护数据

项目中遇到一个需求，基于某些原因，需要后端手动上传图片，然后给出图片地址，然后替换vue项目里的图片地址。打算让后端人员来维护，但是不可能让他们去项目里找到想要的模块，然后替换相应的地址；于是想到的解决办法就是，前端提供一个静态文件（config.js），里面是所有需要替换的图片地址。

一开始是在.vue文件里import该文件，但是每次build打包后，去修改该文件，根本不生效；原因其实是运行的代码是打包过后的，而我们此时去修改该文件，没有再build一次的话，修改的内容肯定是不会生效的；

解决办法就是：

1、vue2.0：把该静态文件放到跟html同级的static文件夹下面，

      vue3.0可以在public文件夹里新建个static文件夹，然后把需要维护的文件放在static文件夹里

2、在.html文件的header中引入

     <script type="text/javascript" src="./static/config.js"></script>

 

3、在config.js文件里定义一个全局变量 

window.imgUrlConfig={
      "data":[
          {"imgUrl":"http://..."},//图片地址
          {"imgUrl":"http://..."}//图片地址

] }

4、引用：window.imgUrlConfig.data

 

总结：就是把你不想要进行编译打包的文件在.html页面直接引入，而不要去import,import的文件如果后期有进行修改，要想生效，肯定是要进行打包编译的，而在.html页面直接引入则不需要重新编译。