基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法


Posted in Javascript onDecember 09, 2018

背景

•基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率。我们的目的是让项目实施的小伙伴重新快乐起来。网上实现的方式,都是半自动化的,还需要重新修改。

需求点

•配置化:打包后的配置文件可二次修改
•配置自动生成:vue-cli 提供了各种环境的打包,要实现相关配置文件的自动打包
•研发人员无痛感:对于产品研发人员来说,不需要增加额外的打包成本,基于Vue-cli的开发习惯不变。

实现步骤

一:配置自动生成

•安装generate-asset-webpack-plugin插件。用于配置文件自动生成。

npm install --save-dev generate-asset-webpack-plugin

•配置webpack.prod.conf.js文件.新增如下代码

// 这段代码在配置文件开头
var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); //Add:Strony;Date:2018年12月7日
const env = require('../config/' + process.env.env_config + '.env')
// 打包后配置文件:新增 2018年12月7日;Strony
var createServerConfig = function (compilation) {
 //Step1:先复制原对象
 var parseEnv = Object.assign({ _hash: compilation.hash}, env)
 //Step2:去除配置文件中的引号
 Object.keys(parseEnv).forEach(function (key) {
  parseEnv[key] = parseEnv[key].replace(/"/g, "");
 });
 return JSON.stringify(parseEnv, null, 2);
}
// 这段代码加在plugins:[]中
 new GenerateAssetPlugin({
   filename: utils.assetsPath('../static/serverConfig.json'),
   fn: (compilation, cb) => {
    cb(null, createServerConfig(compilation));
   },
   extraFiles: []
  })

•输入npm run build:prod 打包命令.vue-cli 默认提供了几个环境的打包环境:早期版本直接:npm run build

基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

结果如下:

基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

•生成的配置文件样式如下:

{
 "_hash": "52f44b45b5b600b7f36e",
 "NODE_ENV": "production",
 "ENV_CONFIG": "sit",
 "BASE_API": "http://*****/APIPlateForm/",
 "BASE_ADDR": "http://****/",
 "REPORT_ADDR": "******"
}

二:全局变量从配置文件读取

1.增加serverConfig.json。目的是开发人员本地开发时候,可以从配置文件读取。内容Copy本地的dev.env.js.住里面的格式为json,去除多余的引号。

基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

2.在main.js中添加下面的代码。目的:读取配置地址挂载在全局对象

import axios from 'axios'
/* eslint-disable no-new */
// 请求文件内容
function getServerConfig() {
 return new Promise((resolve, reject) => {
  axios.get('./static/serverConfig.json').then(result => {
   console.log(result)
   const config = result.data;
   for (const key in config) {
    Vue.prototype[key] = config[key];
   }
   resolve();
  })
 })
}
// 请求文件内容及创建实例
async function main() {
 await getServerConfig();
 console.log('我的地址是' + Vue.prototype.BASE_API)
 axios.defaults.baseURL = Vue.prototype.BASE_API;//axios 的基础地址从配置文件读取
 new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
 })
}
// 方法初始执行
main();

3.项目执行:npm run dev。在浏览器的控制台下可以查看到相关的配置信息

基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

4.使用方法:在vue文件中,直接访问使用各类地址信息。

handleWatchLib(linurl) {
    window.open(this.BASE_ADDR + linurl);
    return false;
   }

总结

以上所述是小编给大家介绍的基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js tab 选项卡
Apr 26 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
Javascript面向对象编程
Mar 18 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
javascript实现前端分页效果
Jun 24 Javascript
JS数组去重的6种方法完整实例
Dec 08 #Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 #Javascript
JS实现的小火箭发射动画效果示例
Dec 08 #Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
ES6的Fetch异步请求的实现方法
Dec 07 #Javascript
JavaScript this绑定过程深入详解
Dec 07 #Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 #Javascript
You might like
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python sorted函数原理解析及练习
2020/02/10 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
求职信模板标准格式范文
2014/02/23 职场文书
生物制药专业求职信
2014/03/11 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
2015年元旦标语大全
2014/12/09 职场文书
工程合作意向书范本
2015/05/09 职场文书
小学生教师节广播稿
2015/08/19 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
导游词之镇江焦山
2019/11/21 职场文书
python flask框架快速入门
2021/05/14 Python
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android