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

编辑：宝哥软件园来源：互联网时间：2021-08-20

新天龙八部

评分

一.需求分析

为了给另一个项目提供一个可嵌入的功能页面，大多数页面在使用时都是独立的功能页面，有些页面还留有侧边栏(相当于3-4页的集成形式)。由于资源位置地址的限制，每个页面打包成单个页面后，需要对门户html文件进行定制和命名，脚本和样式文件需要放在指定的路径下。公共资源地址还必须替换为特殊字符，以适应父系统的调用逻辑(例如，在以下结构中应用jquery.min.js的路径可能是{ { public root } }/{ { public lib } }/jquery . min js)。假设原项目有两个老页面AB，现在需要开发三个页面CDE，目录结构要求如下：

蓝色部分是旧资源，绿色部分是新发展需求。

二.原方案分析

原方案使用Vue ElementUI进行开发，构建过程基本是零配置，开发效率很高，页面风格也统一，但是零配置构建过程只能生成SPA模式的应用，所以原方案为：

施工过程中需要定制的金额提取到config.js文件中统一管理，大概形式如下：

//config . js module . exports={ A : { public path : ' { public root } }/{ { public lib } } ' prodfilename : ' A . html '，entryKey:'public/A '，Entrypath :' public/a/a.js'}，b: {//.}//.}在开发过程中使用统一的路由文件router.js，在打包过程中参考对应页面的XX.router.spa.js作为main.js中的路由，同时注释掉其他页面。打包时传入命令行参数-key=XXX。在打包脚本中解析键值后，从config.js中取出打包所需的设置参数，然后将目标页面打包为一个独立的页面。虽然其他页面也在建设中，但不涉及包装。

//条目文件src/main.js从路由器'导入。/pages/c/router . spa '；//从“”导入路由器。/pages/D/router . spa '；//从“”导入路由器。/pages/E/router . spa '；在使用上述包装过程中存在许多问题：

常见的依赖关系没有剥离，vue和ElementUI会打包到每一个单独的页面中，使得每个打包的index.js大小几乎达到1.2MB。这种空间浪费是不必要的。通用样式没有形成独立的文件，这使得每当样式细节发生变化时，都需要手动逐个重新打包每个页面。页面增加后main.js中会有很多独立的路由。如果在开发过程中进行跨页修改，很可能当main.js中激活的路由是C页路由时，打包时- key参数的值传递给D，不会导致报错，但实际上构造结果确实是错误的。由于入口文件保持main.js不变，在打包不同页面时，结果都是在dist目录下输出，需要手动匹配父项目中的地址，操作繁琐。3.分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(' y args-parser ')(process . argv . slice(2))；const env_short=argv.env.all？全是： argv.p？prod ' : ' devconst webpackConfig=require(`。/config/webpack。$ { env _ short } `)；//根据-p属性，加载web pack const merge=require(' web pack-merge ')的dev配置或prod配置；//基本配置const baseconfig={//.}//输出合并后的配置模块。导出=合并(baseconfi

2.撤回外部参考

在这种情况下，更大的外部应用程序是vue和ElementUI，许多开发人员一直在使用自动化的脚手架工具，但他们还没有意识到如何将这两个库作为外部依赖项引入到项目中。公共库需要填写webpack配置中的外部配置项：

模块。导出={//.externals: {vue:' vue '，' element-ui' :' element'}，//.} key是被引用模块的名称，value是该模块引入后对应的全局名称。外部配置项的含义是：请不要将这个模块注入到编译好的JS文件中。对于源代码中任何导入/需要该模块的声明，请保留并按照模块化标准进行修改。

Tips:

当Vue用作外部依赖时，有很多构建包。在这个例子中，因为它是用webpack构建的，所以不需要在线编译模板，所以不需要引入完整的Vue，只需要引入压缩版本vue.runtime.min.js.从外部导入库时，应该注意命名，例如上面例子中的ELEMENT。开发人员通常在代码中填写自己使用的ElementUI并报告错误。当不确定名字的时候，一个简单的方法就是找一个CDN资源看看。通常，代码以UMD规范的固定结构开始，所以很容易看到关键词(如下图所示)。

然后将资源的CDN地址或本地公共图书馆地址添加到index.html。您可以使用模板语法，然后从html-webpack-plugin插件实例化中传入自定义参数：

！- html文件模板-正文div id=' app'/div脚本src=' http :%=html webpackkplugin . options . vue _ path % '/脚本脚本src=' http :%=html webpackkplugin . options . element ui _ path % '/脚本脚本src=' http :%=html webpackkplugin . options . TPL _ entryPath %/index . js '/脚本/正文//webpack.prod.jsmodule。plugins: [新的HTMlWebPackLugin({ template : ' src/index . html '，//用于生成index.html的模板是filename: ' . '，inject: false，TPL _ entrypath3360 ' .vue _ path: ' .elementui _ path3360 ' .}).//new undleanalyzer plugin()]。}最终打包后生成的index.html文件大致如下：

body div id=' app '/div script src=' http : { { public root } }/{ { public lib } }/vue . min . js '/script script src=' http : { { public root } }/{ { public lib } }/Element-ui . js '/script script src=' http : public/a/a . js '/script/body如果第三方库是本地加载的，那么两个依赖文件，/node _ modules/Element-body样式文件的剥离可以通过插件直接完成。在webpack4之前，使用的是extract-text-webpack-plugin，在4.0版本之后，统一使用的是mini-css-extract-plugin。

3.为webpack定制多个门户

多入口配置是多页应用程序打包的关键。因为打包结果中有嵌套目录，所以需要对Entry对象的键值进行一些定制。封装的路径信息由键值直接定制。同时，需要实例化多个HtmlWebpackPlugin，为每个条目文件生成一个对应的index.html访问条目。定制参数可以在实例化期间传入：

//web pack . 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:[新的HTMlWebPackLugin({ 0.paramsC})，新的html webpackkplugin({ 0.paramsD})，新html webpackkplugin({ 0.paramse})，]}当然，你可以把汇编过程中的入口或者插件数组剥离到其他文件中，然后直接引用：