怎么在Vue + ElementUI项目中使用webpack输出MPA - 行业资讯 - 肥雀云

　　介绍

怎么在Vue + ElementUI项目中使用webpack输出MPA ?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强>一。需求分析

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

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

<强>二。原方案分析

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

将构建过程中需要定制的量提取到<代码>配置。js代码文件中进行统一管理,大致形式如下:

//config.js 　　module.exports =, { 　　答:{才能　　,,,publicPath: & # 39; {{publicRoot}}/{{publicLib}} & # 39; 　　,,,prodFileName: & # 39; A.html& # 39; 　　,,,entryKey: & # 39;公共/一个# 39; 　　,,,entryPath: & # 39;公共//A.js& # 39; 　　,,}, 　　B:{才能　　,,,//? 　　,,}//才能…… 　　}

开发过程中使用统一的路由文件<代码> router.js> main.js> XX.router.spa.js> ——关键=XXX> 键> 配置。js代码中取出打包需要的设置参数,然后将目标页面打包为独立页面,其他页面虽然也在工程中,但并不参与打包。

//,入口文件src/main.js 　　import router 得到& # 39;。/页面/C/router.spa& # 39;;//import router 得到& # 39;。/页面/D/router.spa& # 39;;//import router 得到& # 39;。/页面/E/router.spa& # 39;;

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

<李>

公共依赖没有剥离,vue <代码>和<代码> ElementUI> index.js 几乎有1.2 mb大小,这种空间浪费是没必要的。

<李>

公共样式没有形成独立文件,这使得每当有样式细节发生变更,就需要手动将每个页面逐一进行重新出包。

<李>

页面增多后在<代码> main.js> main.js> ——关键> D> <李>

由于入口文件保持<代码> main.js> dist 目录下,需要手动与母工程中的地址去匹配,操作繁琐。

<强>三。多页面改造3步走

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

<强> 1。分离webpack配置

本例中开发环境和最终打包的主要差异在于路由上,开发中由于可能需要进行跨页面开发,可以使用单入口和独立路由,而进行生产环境构建时则需要输出多页面应用,所以首先要做的就是将原本的<代码> webpack.config.js 文件拆分为<代码> webpack.base.js ,<代码> webpack.dev.js ,<代码> webpack.prod.js 三个文件,<代码> webpack.base.js> /* webpack.base.js示例*/const argv =,要求(& # 39;yargs-parser& # 39;) (process.argv.slice (2)); 　　const env_short =, argv.env.all ?, & # 39;所有# 39;,:,argv.p ?, & # 39;促使# 39;:& # 39;dev # 39;; 　　const webpackConfig =,要求('/config/webpack。$ {env_short} ');//根据- p属性加载webpack的dev配置或促使配置　　const merge =,要求(& # 39;webpack-merge& # 39;);//基本配置　　const baseConfig =, {//....才能　　}//输出合并后的配置　　module.exports =,合并(baseConfig, webpackConfig);