vue公用跳转文件_vuecli 多页面之公共入口

前言

网上vuecli多页面配置教程大多讲的是如何配置多页面，少有见到介绍多页面的优化方案。

以下总结几点缺陷：

1、如何公共引入？公共入口怎么设置？

2、路由跳转和传参怎么方便？

3、每个页面都要手动创建？

项目结构

├─ config

│ ├─ configuration.js

│ ├─ options.js

│ └─ template.js

├─ public

│ └─ favicon.ico

├─ src

│ ├─ api

│ │ ├─ modules

│ │ │ ├─ aboutApi.js

│ │ │ └─ homeApi.js

│ │ ├─ index.js

│ │ └─ request.js

│ ├─ assets

│ ├─ components

│ │ ├─ footer.vue

│ │ └─ header.vue

│ ├─ main.js

│ ├─ pages

│ │ ├─ home

│ │ │ ├─ index.html

│ │ │ ├─ index.js

│ │ │ ├─ index.scss

│ │ │ └─ index.vue

│ ├─ styles

│ │ ├─ index.scss

│ │ └─ var.scss

│ └─ utils

│ ├─ comFunc.js

│ ├─ eventBus.js

│ └─ router.js

├─ babel.config.js

├─ package.json

├─ README.md

├─ vue.config.js

└─ yarn.lock

公共入口

通过webpack为每个页面配置统一入口(总入口)，说白了就是借助webpack为每个页面引入main.js，借此达到公共引入的效果。

main.js进行公共提取复用。

configureWebpack: (config) => {

config.optimization = {

splitChunks: {

cacheGroups: {

// 抽取公共代码

common