vue-cli@4.x 多页面应用 history 路由改造踩坑

记录下这两天多页面应用 history 路由改造踩坑的心路历程。。。

环境配置

环境不一致，文中使用的 api 可能会发生变更

    {
        "vue": "^2.7.10",
        "vue-router": "^3.5.4",
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
    }

多页面应用改造

背景

我们主要做的拖拉拽生成可视化大屏的产品，我刚来项目组时，项目刚开始比较混乱，处于刀耕火种时期，其中分享功能是由后台直接生成的链接，而前端打包只能手动更改路由，注释掉其余路由，只保留 /share 路由。第一次优化，利用 vue-cli 自定义环境变量 处理了需要手动操作路由的坑，一次打包生成两个包，一个正常包，一个分享包。。。经过过一年持续迭代后，发现打包后的产物越来越臃肿，无法共享公共模块。。。研究讨论后，开始改造多页面应用。

行动

1. 首先 src 目录下新增 pages 文件夹，作为多页面入口目录

1. 其次 public 目录下，新增 两个入口页面的 index.html

1. 接着改造路由

1. 最后改造 vue.config.js

   在 pages 中配置多页面入口

一顿操作猛如虎，npm run serve , 运行项目发现页面一片空白。。。遇到问题不要慌，先喝口水压压惊

。。。打开控制台，发现了报错 Uncaught SyntaxError: Unexpected token '<'

查看 network 后发现，是把应该返回 js 文件的，结果由于路径问题给返回了 index.html ， 再看第一个请求，发现返回的 html 中的 js 资源是相对路径，所以改下publicPath: '/' , 再刷新页面后正常显示了，完美收工。。。正当我美滋滋喝茶时，同事说编辑页面进不去了。。。好吧，坑又来了

坑点

1.无法定位我自己所配置的 shareDisplay 页面

    devServer: {
        historyApiFallback: {
            verbose: true,
            rewrites: [
                {from: /^/home//, to: "/index.html"},
                {from: /^/shareDisplay//, to: "/shareDisplay/index.html"},
            ],
        },
    },

2. historyApiFallback 和 proxy 配置冲突了，导致本地运行返回了线上的资源

其余模块都正常，只有 template 模板模块刷新无法显示，查看 network 后，发现第一个请求返回了线上环境的 index.html ，导致找不到后续的 js 等资源。。。查看 proxy 配置后， 发现 /template 被代理拦截了。。。查询 文档 后发现 bypass 函数可以控制代理

不知道项目使用的 webpack 版本时，可以使用命令 npm ls webpack 查看

打完收工