Vue+ElementUI项目使用webpack输出MPA的方法
一. 需求分析
为另一个项目提供可嵌入的功能单页，大部分页面使用时都是独立功能页，个别页面带有左侧边栏（相当于3-4个页面的整合形态），由于资源定位地址的限定，每个页面打包为单页后，入口html文件需要定制命名，且脚本和样式文件需要放在指定的路径下，公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑（比如下面结构中应用jquery.min.js的路径可能是{{publicRoot}}/{{publicLib}}/jquery.minjs）。假设原工程中拥有AB这2个旧页面，现在需要开发CDE这3个页面，目录结构要求如下：
蓝色部分为旧资源，绿色部分为新开发需求。
二. 原方案分析
原方案采用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';
上述打包过程在使用中出现了很多问题：
- 公共依赖没有剥离，
vue和ElementUI会被打包进每一个单页面，使得每个打包出的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规范的固定结构，很容易看到关键词(如下图所示)。
然后将资源的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数组的组装过程剥离到其他文件中，然后直接引用：
当然，每个页面的入口文件X.entry.js相当于旧方案中main.js文件中移除被注释掉的未启用路由信息后剩余的部分，它足以支撑每个单页独立被访问。
四. 小结
经上述改造后，在dist目录中输出的结构和需求中public目录下的结构就保持一致了，而且每个页面的index.js文件也缩小到了100K左右。当然你也可以使用node.js去编写一些自动化脚本，将后续的替换过程也自动化，或者继续对webpack的打包过程进行优化，本文就不再赘述了。
以上所述是小编给大家介绍的Vue+ElementUI项目使用webpack输出MPA的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
详解如何在vue项目中引入elementUI组件
前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu
-
vue项目创建并引入饿了么elementUI组件的步骤
1:安装node 前端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载,安装完成之后,打开cmd开始输入命令.(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错. 2:查看node的版本号 输入命令:node -v; 3:安装淘宝npm镜像 由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可以代替默认的np
-
Vue项目引进ElementUI组件的方法
环境要求 Nodejs Nodejs 官网下载地址:http://nodejs.cn/download/具体安装参考其他资料 打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确. 如果安装版本比较老,想升级新版本 npm install npm -g 安装 webpack 安装webpack npm install webpack -g -g 表示安装为全局 安装 vue-cli 安装 vue 脚手架项目初始化工具 vue-cli npm install vue-cli
-
Vue项目查看当前使用的elementUI版本的方法
在我们引入elementUI的时候,一般是两种方式:npm安装或者在script直接引入: 当然,在script直接引入的时候,我们也可以通过直接指定版本的方式,达到锁定版本的效果. <script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script> 直接引入是从外网引入,每次加载都是读取外部网站,我们大部分开发者可能使用的是npm安装的方式,采用这种方式引入的时候,elementUI会保存在vue
-
Vue+ElementUI项目使用webpack输出MPA的方法
一. 需求分析 为另一个项目提供可嵌入的功能单页,大部分页面使用时都是独立功能页,个别页面带有左侧边栏(相当于3-4个页面的整合形态),由于资源定位地址的限定,每个页面打包为单页后,入口html文件需要定制命名,且脚本和样式文件需要放在指定的路径下,公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑(比如下面结构中应用jquery.min.js的路径可能是{{publicRoot}}/{{publicLib}}/jquery.minjs).假设原工程中拥有AB这2个旧页面,现在需要开发CDE
-
解决vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import
-
vue + elementUI实现省市县三级联动的方法示例
本文介绍了vue + elementUI实现省市县三级联动的方法示例,分享给大家,具体如下: 1.首先需要准备省市县json文件,网上有很多可以下载.项目中使用的city.json数据是这样的格式: [ { "value": "110000", "label": "北京市", "children": [ { "value": "110000", "label
-
vue element-ui 绑定@keyup事件无效的解决方法
解决办法: <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解
-
Vue + Elementui实现多标签页共存的方法
这个主题,早在一年前就已经创建,也写了一些内容,碍于在应用上体验始终不够完美,一直只存着草稿. 经过多个平台实践,多次迭代,一些功能加了又减了,最后还是回归了最精简的版本,已适用于大部分的场景,若有需要,可自行扩展. 关键逻辑 使用 keep-alive 来缓存各标签页 通过 vue-router 的 beforeEach 方法来更新标签信息 通过 vuex 来保存标签信息 通过 vuex 来使关闭页不被缓存 核心代码 定义 vuex 的跨页变量(store/index.js) import V
-
vue elementUI表格控制显示隐藏对应列的方法
本文实例为大家分享了vue elementUI表格控制显示隐藏对应列的具体代码,供大家参考,具体内容如下 需求:后端返回全部列数据.前端根据选项来显示对应的列,如果不勾选,默认全部隐藏. 效果图 勾选后显示对应的列 上代码 html部分 这里用v-if来显示隐藏,因为这个elementul组件的原因,v-show不生效,要用v-if <el-table-column v-if="lists[0].ispass" label="Uppe
-
Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应的组件 我这是通过点击 预览 按钮 获取id打开一个dialog来实现 <!--PDF 预览--> <el-dialog :title="PDF 预览" :visible.sync="viewVisible" width="80%"
-
vue项目之webpack打包静态资源路径不准确的问题
目录 webpack打包静态资源路径不准确 问题 静态资源找不到如js文件 图片找不到 webpack中的静态资源处理 Webpacked 资源 资源处理规则 在JavaScript里获取资源路径 "真实的" 静态资源 webpack打包静态资源路径不准确 问题 1.将打包好的项目部署到服务器,发现报错说图片找不到. 2.静态资源如js访问不到 分析并且解决问题 明确一点的就是,看到报错404,找不到静态资源,很明显,路径错误了. 静态资源找不到如js文件 资源打包路径有误,打包后的资
-
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
-
解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里