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頁面直接引入則不需要重新編譯。