Vue根据不同的路由文件实现打包差异化
有些时候我们经常一个项目中开发不同的功能,有可能一个前端项目中夹杂着不同系统之间的需求,最后打包发布的时候经常会将与项目不相关的代码一同打包进去,实际来讲这种操作也是不严谨的。那有没有办法可以根据某些不同的配置来实现打包的结果不同呢?答案是肯定的。在介绍下边的方法之前,希望读者有一些关于webpack以及Vue router的概念和应用,废话不多说,开始介绍。
首先来讲webpack,webpack是一个模块打包器他会收集各个组件之间的依赖关系,并通过此依赖关系来将所有的js、css、jpg等等都打成一个一个的组件依赖。而在Vue中也是使用webpack来进行模块打包工作,那么在Vue中有没有明确的依赖关系描述呢?在Vue中的所有的跳转都是通过Vue router进行的,那是不是可以认为router拥有着组件之间的依赖关系。而router中跳转的关键是通过不同的router.js加载不同的*.Vue组件,而后通过别名或者path进行跳转。当然的在router中需要使用index.js文件来引入不同的router.js,由此Vue才可以正确的去寻找并去加载*.Vue文件。
既然知道了Vue是通过router中index.js文件去加载的,那么就意味着可以通过定义不同的index.js来实现打包差异化。但是,定义多个index.js虽然可行,打包的时候webpack又怎么会知道加载那个index.js文件呢?这时候就可以使用webpack中的一个内置组件NormalModuleReplacementPlugin来完成(NormalModuleReplacementPlugin的原理请自行GooGle),首先,使用npm run build的时候Vue会去加载webpack.prod.conf.js文件,这时候就可以在webpack.prod.conf.js文件中使用NormalModuleReplacementPlugin,方法如下:
var appTarget = env.PROJ_NAME
plugins: [
new webpack.NormalModuleReplacementPlugin(/.*APP_TARGET\./,
function (resourse) {
var str = appTarget.replace("\"","").replace("\"","");
resourse.request = resourse.request.replace(/APP_TARGET/, `${str}`);
}),
]
这个组件的实际上是所有的xxxx.APP_TARGET后边的APP_TARGET替换为指定的字符,由此再去加载文件,其中env.PROJ_NAME是定义在prod.env.js中的一个标识,这样就可以通过定义在prod.env.js中的这个标识去寻找相对应的index_xxxx.js文件,进而实现打包差异化。比如,你需要A项目的代码,只需要将prod.env.js中的PROJ_NAME字段改为A
'use strict'
module.exports = {
NODE_ENV: '"production"',
PROJ_NAME:'"A"'
}
这样Vue就会去加载index_A.js,同理当你需要B项目代码的时候只需要将PROJ_NAME更改为B即可。
当决定使用以上方法的时候,在main.js文件中引入路由主文件就不可以像下边这样引用了
import router from './router/index.js'
要修改成
import router from './router/index_APP_TARGET.js'
这样引用router才会去动态加载并实现打包差异化,这时候用户需要在定义不同的index.js文件来实现不同的vue组件引用,比如
index_A.js
index_B.js
index_C.js
在上述条件都完成之后可以使用以下命令来验证打包结果
npm run build --report
注:npm run build --report 命令实际是对 webpack-bundle-analyzer的一个使用 webpack-bundle-analyzer是一个可视化资源分析工具 用户可以在其中查看资源的分布情况
Vue根据不同的路由文件实现打包差异化的更多相关文章
- Vue 项目中对路由文件进行拆分(解构的方法)
项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分 ...
- K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...
- Vue 多路由文件的合并
Vue 多路由文件的合并 1.使用的是ES6 数组的合并方法 let routes = new Set([...routes1, ...homerouters]);2.两个路由文件,导出的实际上就是一 ...
- vue(18)路由懒加载
什么是路由懒加载 官方的解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更 ...
- vue学习记录④(路由传参)
通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...
- vue组件,axios ,路由
组件(Component)自定义封装的功能. 把一个功能相关的[HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 组件就是一个html网页中的功 ...
- vue中怎样实现 路由拦截器
vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...
- 如何在Vue项目中给路由跳转加上进度条
1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
随机推荐
- 什么是YAML?
YAML是"YAML不是一种标记语言"的外语缩写 [1] (见前方参考资料原文内容):但为了强调这种语言以数据做为中心,而不是以置标语言为重点,而用返璞词重新命名.它是一种直观的能 ...
- Android零基础入门第37节:初识ListView
原文:Android零基础入门第37节:初识ListView 之前我们学习的一些UI组件都比较简单,但是在实际开发中,会经常遇见列表界面设计,如通讯录.电话列表.信息列表等.那么从本节开始来详细学习列 ...
- Linux命令执行顺序与管道命令
命令执行顺序控制 顺序执行多条命令:command1;command2;command3... 有选择执行命令:which command1 && command2 || comman ...
- DIOCP3 DEMO的编译(去掉VCL前缀)
总有些朋友问我,关于DEMO编译的一些问题,每次都回答大概都差不多,我想还是写篇说明书给大家,关于DEMO编译的步骤. [环境设定] 1.将DIOCP3\source路径添加到Delphi的搜索路径, ...
- 地球坐标-火星坐标-百度坐标及之间的转换算法 C#
美国GPS使用的是WGS84的坐标系统,以经纬度的形式来表示地球平面上的某一个位置.但在我国,出于国家安全考虑,国内所有导航电子地图必须使 用国家测绘局制定的加密坐标系统,即将一个真实的经纬度坐标加密 ...
- java8计算时间差
示例1:计算指定时间单位的时间差 import java.time.Instant;import java.time.LocalDateTime;import java.time.temporal.C ...
- Qt+VS编译器:默认库“library”与其他库的使用冲突;使用 /NODEFAULTLIB:library(我曾经碰到过,修改qmake.conf,但我修改的是VS的IDE配置)good
找到qt安装目录下的mkspecs文件夹,在里面找到你使用的对应版本编译器,打开qmake.conf.稍等: /MD:动态链接多线程库(msvcrt.lib).使用该选项时,需要用/NODEFAULT ...
- Ruby元编程:动态添加类属性及其实际应用
上个星期测试道的Monkey老师和我聊到测试用例参数过多的问题,其实这样的问题在我这里也同样经历过.比如我的测试用例必须面对不同的测试环境,每个环境有无数的参数,开发的最初阶段,因为参数少,所以就放在 ...
- python常用数据结构(2)
1.有名字的元组——namedtuple >>> from collections import namedtuple >>> Point = namedtuple ...
- 【转载】Spring Boot引起的“堆外内存泄漏”排查及经验总结
背景 为了更好地实现对项目的管理,我们将组内一个项目迁移到MDP框架(基于Spring Boot),随后我们就发现系统会频繁报出Swap区域使用量过高的异常.笔者被叫去帮忙查看原因,发现配置了4G堆内 ...