当前位置:首页 > 编程教程 > vue技术文章 > Vue+ElementUI项目使用webpack输出MPA的方法

Vue+ElementUI项目怎样使用webpack输出MPA

  • 发布时间:
  • 作者:码农之家
  • 点击:159

这篇文章主要知识点是关于Vue+ElementUI、webpack、MPA、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js前端开发:快速入门与专业应用
  • 类型:前端开发大小:3.6KB MB格式:PDF作者:陈陆扬
立即下载

Vue+ElementUI项目使用webpack输出MPA的方法

一. 需求分析

为另一个项目提供可嵌入的功能单页,大部分页面使用时都是独立功能页,个别页面带有左侧边栏(相当于3-4个页面的整合形态),由于资源定位地址的限定,每个页面打包为单页后,入口html文件需要定制命名,且脚本和样式文件需要放在指定的路径下,公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑(比如下面结构中应用jquery.min.js的路径可能是{{publicRoot}}/{{publicLib}}/jquery.minjs)。假设原工程中拥有AB这2个旧页面,现在需要开发CDE这3个页面,目录结构要求如下:

Vue+ElementUI项目使用webpack输出MPA的方法

蓝色部分为旧资源,绿色部分为新开发需求。

二. 原方案分析

原方案采用Vue+ElementUI进行开发,构建过程基本是零配置的,开发效率非常高,页面风格也统一,但零配置的构建过程只能生成SPA模式的应用,所以原方案的做法是:

将构建过程中需要定制的量提取到config.js文件中进行统一管理,大致形式如下:

//config.js
module.exports = {
  A:{
    publicPath:'{{publicRoot}}/{{publicLib}}'
    prodFileName:'A.html',
    entryKey:'public/A',
    entryPath:'public/A/A.js'
  },
  B:{
    //...
  }
  //...
}

开发过程中使用统一的路由文件router.js,打包过程中在main.js中引用对应页面的XX.router.spa.js作为路由,而将其他页面注释掉,打包时传入命令行参数--key=XXX,key值在打包脚本中被解析后从config.js中取出打包需要的设置参数,然后将目标页面打包为独立页面,其他页面虽然也在工程中,但并不参与打包。

// 入口文件src/main.js
import router from './pages/C/router.spa';
//import router from './pages/D/router.spa';
//import router from './pages/E/router.spa';

上述打包过程在使用中出现了很多问题:

  • 公共依赖没有剥离,vueElementUI会被打包进每一个单页面,使得每个打包出的index.js几乎有1.2MB大小,这种空间浪费是没必要的。
  • 公共样式没有形成独立文件,这使得每当有样式细节发生变更,就需要手动将每个页面逐一进行重新出包。
  • 页面增多后在main.js中会有很多独立路由,如果开发中进行了跨页面修改,很可能在main.js中激活的路由为C页面路由时,打包时--key参数的值却传成了D,这种情况并不会引起报错,但事实上构建结果确实错误的。
  • 由于入口文件保持main.js没有变化,所以在不同页面打包时,结果都输出在dist目录下,需要手动与母工程中的地址去匹配,操作繁琐。

三. 多页面改造3步走

上面的问题实际上都是因为原方案将一个多页面开发需求按照单页面应用来实现而造成的,需要对自动化构建工程进行一些定制。

1.分离webpack配置

本例中开发环境和最终打包的主要差异在于路由上,开发中由于可能需要进行跨页面开发,可以使用单入口和独立路由,而进行生产环境构建时则需要输出多页面应用,所以首先要做的就是将原本的webpack.config.js文件拆分为webpack.base.js,webpack.dev.js,webpack.prod.js三个文件,webpack.base.js为环境无差别的配置,然后依据构建模式的不同,使用webpack-merge插件将环境相关的配置与基本配置进行合并:

/*webpack.base.js示例*/
const argv = require('yargs-parser')(process.argv.slice(2));
const env_short = argv.env.all ? 'all' : argv.p ? 'prod':'dev';
const webpackConfig = require(`./config/webpack.${env_short}`);//根据-p属性加载webpack的dev配置或prod配置
const merge = require('webpack-merge');

//基本配置
const baseConfig = {
  //....
}

//输出合并后的配置
module.exports = merge(baseConfig, webpackConfig);

webpack.dev.js保持原本的SPA开发的设置即可满足需求。

2. 抽离外部引用

本例中较大的外部应用是vue和ElementUI,很多开发者一直使用自动化脚手架工具,并没有意识到这两个库作为外部依赖该如何引入工程。公共库的抽离需要在webpack配置中将其填写在external配置项中:

module.exports = {
 //...
 externals:{
   vue:'Vue',
   'element-ui':'ELEMENT'
 },
 //...
}

key为引用的模块名,value为这个模块引入后对应的全局命名,external配置项的含义是:请不要将这个模块注入编译后的JS文件里,对于源代码里出现的任何import/require这个模块的语句,请将它保留并根据模块化标准进行依赖方式适配 。

Tips:

Vue做为外部依赖时有很多构建包,本例中因为使用webpack进行了构建,没有在线编译模板的需求,所以不需要引入完整的Vue,而只需要引入压缩后的只包含运行时的版本vue.runtime.min.js即可。外部引入库时需要注意命名,比如上例中的ELEMENT,开发者通常会填写为自己在代码中使用的ElementUI而引起报错,当不确定名称时,有个简单的办法就是找一个CDN的资源看一下,通常代码最开始都是UMD规范的固定结构,很容易看到关键词(如下图所示)。

Vue+ElementUI项目使用webpack输出MPA的方法

然后将资源的CDN地址或是本地公共库地址加入到index.html中,你可以使用模板语法,然后从html-webpack-plugin插件实例化时传入定制参数:

<!--html文件模板-->
<body>
 <div id="app"></div>
 <script src="<%= htmlWebpackPlugin.options.vue_path %>"></script>
 <script src="<%= htmlWebpackPlugin.options.elementUI_path %>"></script>
 <script src="<%= htmlWebpackPlugin.options.tpl_entryPath %>/index.js"></script>
</body>
//webpack.prod.js
module.exports = {
  //...
 plugins: [
  new HtmlWebpackPlugin({
   template: 'src/index.html',//生成index.html时依据的模板
   filename: '.....',
   inject:false,
   tpl_entryPath:'....',
   vue_path:'.....',
   elementUI_path:'.....',
  }),
  //new BundleAnalyzerPlugin()
 ],
}

最终打包后生成的index.html文件大致如下:

<body>
 <div id="app"></div>
 <script src="{{publicRoot}}/{{publicLib}}/vue.min.js"></script>
 <script src="{{publicRoot}}/{{publicLib}}/element-ui.js"></script>
 <script src="public/A/A.js"></script>
</body>

如果第三方库从本地加载,则需要将/node_modules/element-ui/lib/index.js和/node_modules/vue/dist/vue.runtime.min.js两个依赖文件拷贝到lib文件夹中的对应地址,这样访问index.html时就可以以外部依赖的形式将其加载进来。样式文件的剥离直接使用插件完成即可,webpack4以前的版本使用extract-text-webpack-plugin,从4.0版本后统一使用mini-css-extract-plugin。

3. 为webpack定制多入口

多入口的配置是多页面应用打包的关键,由于打包结果存在嵌套目录,所以需要对entry对象的键值进行一些定制,打包后的路径信息是直接通过key值来定制的,同时需要实例化多个HtmlWebpackPlugin来为每一个入口文件生成一个对应的index.html访问入口,定制参数可以在实例化时传入:

//webpack.prod.js
module.exports = {
  entry:{
    'C/index':'./src/pages/C/C.entry.js',
    'DESK/D/index':'./src/pages/D/D.entry.js',
    'DESK/E/index':'./src/pages/E/E.entry.js'
  }
  //...
  plugins:[
    new HtmlWebpackPlugin({...paramsC}),
    new HtmlWebpackPlugin({...paramsD}),
    new HtmlWebpackPlugin({...paramsE}),
  ]
}

当然你可以将entry或plugins数组的组装过程剥离到其他文件中,然后直接引用:

Vue+ElementUI项目使用webpack输出MPA的方法

当然,每个页面的入口文件X.entry.js相当于旧方案中main.js文件中移除被注释掉的未启用路由信息后剩余的部分,它足以支撑每个单页独立被访问。

四. 小结

经上述改造后,在dist目录中输出的结构和需求中public目录下的结构就保持一致了,而且每个页面的index.js文件也缩小到了100K左右。当然你也可以使用node.js去编写一些自动化脚本,将后续的替换过程也自动化,或者继续对webpack的打包过程进行优化,本文就不再赘述了。

以上所述是小编给大家介绍的Vue+ElementUI项目使用webpack输出MPA的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.398716

vue+elementUI实现图片上传功能

本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1、html el-form-item label="图片" prop="logo" el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="picture-card" :file-list="fileLists" :on-preview="handlePictureCardPreview" :on-success="success" :on-remove="handleRemove" i class="el-icon-plus"/i /el-upload !--大图弹出框-- el-dialog :visible.sync="imgDialogVisible" size="full" :modal="false" title="查看大图片" img width="100%" :src="dialogImageUrl" alt="" /el-dialog/el-form-item 2、定义 dialogImageUrl: '', imgDialogVisible: false, fileLists: [], 3、在需要使用的方法中给fileLists[]赋值 vm.fileLists = [];if (row.logo != undefined row.logo != "") { vm.fileLists.push({url:row.logo});} 4、其他几个属性的方法 //删除图片handleRemove(file, fileList) { this.form.logo=''},//查看大图handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.imgDi……

网友NO.347346

vue+elementUi图片上传组件使用详解

上传组件封装需求分析 在基于 elementUI 库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息。加上后台要求要传递小于2M的图片,因此封装了一个 upload.vue组件 作为上传页面的子组件,它用于管理图片上传逻辑。 upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见, 不能将其设置为display:none。否则将将无法触发input的change事件 upload.vue代码如下: template div div class="upload-box" : !-- 用户改变图片按钮的点击 触发上传图片事件 -- input type="file" :ref="imgType$1" @change="upload(formVal$1,imgType$1)" class="upload-input" / !-- img 的 src 用于渲染一个 图片路径 传入图片路径 渲染出图片 -- img :src="formVal$1[……

网友NO.616744

基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成; 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,因为我们是遍历生成的表单,那我们的写法就要写成: 重点在prop属性 template v-for="(k,index) in formData.lists" el-form-item :ref="index+'concatValue'" :prop="'lists.' + index +'.concatValue'" :rules="k.rules" el-input v-model="k.concatValue"/el-input /el-form-item/template 2.因为我选择了根据类型动态修改校验规则,而不是切换不同类型的输入框, 注意看下上文代码中的ref和rules, 当类……

网友NO.988840

vue+elementUI 复杂表单的验证、数据提交方案问题

当我们在做后台管理系统时,经常会遇到非常复杂的表单: 表单项非常多 在各种表单类型下,显示不同的表单项 在某些条件下,某些表单项会关闭验证 每个表单项还会有其他自定义逻辑,比如输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。 在这种错综复杂的情况下,完成表单的验证和提交 可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案 方案1: 在一个vue 文件中 所有的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一起 v-if/v-showelementui 缺点 乱 乱 还是乱 一个vue 文件,轻轻松松上2000 行 在我尝试加入一种新的表单类型时,我发现我已经无。从。下。手。 方案2:分离组件 其实很容易想到根据不同的表单类型,分离出多个相应类型的子表单 。但我在实……

网友NO.673360

利用vue+elementUI实现部分引入组件的方法详解

前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富。 官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库 Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。 两者各有优缺点,不多评论,根据自己的需求,我最后使用了Element。因为最近公司开发一个很小的后台项目,所以考虑部分引入element的组件,因为第一次单独引入没有经验,网上看了很多都有这样那样的问题,个人感觉官网也没把我说明白(也许自己水平太低了),所以自己研究了一下亲测有效,如有错误欢迎指出。 实现方法 1、安装vue-cli npm install -g vue-cli 2、创建项目projectName是你项目的名字 npm install webpack projectName 3、进入项目目录 cd projectName 4、初始化项目安装依赖……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com