由于项目有外部部署需求,对不同的环境前端调用后台的地址不一样,且不能提前预知必须到部署现场后才能确定后端地址,故需要将调用后端相关的配置抽离到文件中,打包后部署人员在方便现场修改。
思路如下:
1.由于项目中vue初始化部分有很多网络请求,所以必须在加载vue的内容之前引入配置,为解决异步请求问题直接在public/index.html的head中引入配置(vue在body后注入)。
2.配置放在js文件中,js文件中将配置对象放到localStorage中。有方法是将配置对象赋值给window顶级对象,感觉这样不安全,故采用放到localStorage的方式。
3.在需要使用配置的地方,反序列化localStorage,取出其中的配置项使用。
操作方法:
1.在public目录下新建目录config,config目录下新建dynamicConfig.js文件,内容如下
let dynamicConfig = { server_url: "http://127.0.0.1" //自行加配置项 } let jsonStr = JSON.stringify(dynamicConfig) localStorage.dynamicConfig = jsonStr
2.修改public下index.html,引入dynamicConfig.js。使用config相对路径为了方便开发环境和生产环境都能调用到。
<head></head>内增加如下一行
<script src="config/dynamicConfig.js"></script> <!-- 读入抽离的配置 -->
3.配置webpack,使用copy-webpack-plugin插件将js文件打包到dist/config目录下。
1)安装插件
npm install -save copy-webpack-plugin
2)在vue.config.js中配置
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件 module.exports = { //... configureWebpack: { plugins: [ new CopyWebpackPlugin([ //打包时执行拷贝 { from: __dirname + "/public/config/dynamicConfig.js", to: __dirname + "/dist/config/dynamicConfig.js" } ]) ] } }
4.在js文件中读取配置
let endpoint = "http://127.0.0.1:8080" //开发环境使用js中定义的配置,生产环境使用config/dynamicConfig.js中配置 if(process.env.NODE_ENV === "developement"){ endpoint = "XXX" //自定义 }else{ if(localStorage.dynamicConfig){ //使用从dist/config/dynamicConfig.js中读取的配置 let config = JSON.parse(localStorage.dynamicConfig) if(config.server_url) endpoint = config.server_url } }
动态修改配置方法:修改dist/config/dynamicConfig.js中server_url对应的值,修改后浏览器可能会有缓存哦~