16.如何做到webpack打包vue項目後,可以修改配置文件
阿新 • • 發佈:2017-06-29
r.js all config rest 技術分享 req api local err
問題描述:
前端需要修改restful API的url,但是打包之後,配置文件找不到了,如果在npm run build 生成dist後,這個配置也被寫死了,傳到運行的前端服務器上後,假設某次,api服務器的ip修改了,改動只是更新下這個url,但是卻需要會到前端源碼,url後,在重新npm run build,然後再把整個dist再重新傳到前端服務器,才可以。
解決方法:
用了generate-asset-webpack-plugin 這個插件,在webpack.prod.conf.js中去生成configServer.json文件,讓其在build的時候生成json文件,然後再使用axios異步獲取json,替換url即可
具體做法:
先安裝generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
在webpack.prod.conf.js裏面配置
//讓打包的時候輸出可配置的文件 var GenerateAssetPlugin = require(‘generate-asset-webpack-plugin‘); var createServerConfig = function(compilation){ let cfgJson={ApiUrl:"http://139.129.31.108:8001"};return JSON.stringify(cfgJson); }
//讓打包的時候輸入可配置的文件 new GenerateAssetPlugin({ filename: ‘serverconfig.json‘, fn: (compilation, cb) => { cb(null, createServerConfig(compilation)); }, extraFiles: [] })
打包之後,在根目錄就會生成serverconfig.json文件
使用:
axios.get("serverconfig.json").then((result)=>{ localStorage.setItem(‘ApiUrl‘,result.data.ApiUrl); console.log(localStorage.getItem(‘ApiUrl‘)); }).catch((error)=>{console.log(error)});
則可以獲取到serverconfig.json裏面的key ApiUrl的值,需要註意的是,由於是異步操作,為了通信,可以采用localstorage,把東西存起來,即localstorage.setItem
使用的時候可以用localstorage.getItem
16.如何做到webpack打包vue項目後,可以修改配置文件