webpack + vue 打包生成公共配置文件(域名) 方便动态修改
需求原因
原来的项目中域名是打包到项目里面的,打包后不能动态配置,只能通过不同的指令打包来切换域名,每天都在测试域名和正式域名来回摩擦,后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好,于是就有了这篇文章。
第一步 安装插件
npm install --save-dev generate-asset-webpack-plugin
第二步 新建配置文件
在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件
{"ProdUrl":http://text.com}
第三步 引入generate-asset-webpack-plugin
在build/webpack.prod.conf.js中添加
const GenerateAssetPlugin = require('generate-asset-webpack-plugin'); const serverConfig = require('../serverConfig.json');//引入根目录下的配置文件 const createJson = function() { return JSON.stringify(serverConfig); }; //plugins 中使用 plugins: [ //打包时生成一个配置文件 new GenerateAssetPlugin({ filename: 'serverConfig.json', fn: (compilation, cb) => { cb(null, createJson()); }, }), ]
第四步 使用配置文件中的内容
这里根据不同项目不同需求代码自行变换,我分享一下我的项目里的使用,项目中封装了axios,并对请求拦截做了处理
service.interceptors.request.use( async (config) => { var baseURL = process.env.BASE_API if(process.env.NODE_ENV === "production"){ await axios.get('serverConfig.json').then( e => { baseURL = e.data.ProdUrl }) } config.baseURL = baseURL if (store.getters.token) { // 让每个请求携带token config.headers["X-Token"] = getToken(); config.headers = { "X-Token": getToken(), "Content-Type": "application/json-patch+json" }; } return config; }, error => { // Do something with request error console.log(error); // for debug Promise.reject(error); } );
变黄的部分则是获取配置文件的方法,由于是使用axios获取,是异步方法,根据情况进行处理。、
好了接下来就再也不用为了域名每天build了
打包后的目录
总结
以上所述是小编给大家介绍的webpack + vue 打包生成公共配置文件(域名) 方便动态修改,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关文章
vue单文件组件lint error自动fix与styleLint报错自动fix详解
这篇文章主要给大家介绍了关于vue单文件组件lint error自动fix与styleLint报错自动fix的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-01-01vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
这篇文章主要介绍了vue实现分环境打包步骤(给不同的环境配置相对应的打包命令),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-06-06vue require.context全局注册组件的具体实现
本文主要介绍了vue require.context全局注册组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
最新评论