基于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实现DIV的一些简单控制
Jun 04 Javascript
屏蔽script注入小例子
Nov 12 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 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 无限级 SelectTree 类
2009/05/19 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
php除数取整示例
2014/04/24 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
javascript中常用编程知识
2013/04/08 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Python线程创建和终止实例代码
2018/01/20 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
C#笔试题和英文面试题
2013/02/07 面试题
linux面试题参考答案(2)
2015/12/06 面试题
中式面点餐厅创业计划书
2014/01/29 职场文书
留学顾问岗位职责
2014/04/14 职场文书
一年级学生评语
2014/04/23 职场文书
周年庆典答谢词
2015/01/20 职场文书
公司门卫岗位职责
2015/04/13 职场文书
观后感开头
2015/06/19 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL