位置: 编程技术 - 正文
详解如何将 Vue-cli 改造成支持多页面的 history 模式(vue-cal)
编辑：rootadmin推荐整理分享详解如何将 Vue-cli 改造成支持多页面的 history 模式(vue-cal)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue怎么把数据传到后端,vue怎么把数据存储在本地,vue-cal,vue如何整合到java项目,vue怎么把数据存储在本地,vue文件如何编译成html,vue文件如何编译成html,vue文件如何编译成html,内容如对您有帮助，希望把文章链接给更多的朋友！
标题可能描述不准确, 大概就是这么个需求:
用 Vue-cli 搭建一个多入口, 多页面的站点, 也就是通过html-webpack-plugin插件会生成多个 .html 文件, 在默认下, 是只有 index.html 这个入口可以用 history 模式, 如: 而其他的入口只能用 hash 模式, 如: 因为webpack-dev-middleware会将所有的路由都指向 index.html 文件, 假如线上的时候, 都需要 history 模式, 这样多少会造成麻烦.
真是太二了, 刚写完文章就发现connect-history-api-fallback这个插件就是做这个的...
方法更新如下:
修改 build/dev-server.js 文件
改成
具体规则就参考: 以下代码请无视 --------------
下面我们就来改造下, 让所有入口都支持 history 模式:
1. 首先, 我们在 build 目录下建立个 setup-dev-server.js 文件, 里面代码如下:
2. 修改 build/dev-server.js 文件
主要修改文件中var app = express()到module.exports = app.listen(port, function (err) {之间的代码
3. npm run dev 开始愉快的写代码吧
标签: vue-cal
本文链接地址:https://www.jiuchutong.com/biancheng/377405.html 转载请保留说明！上一篇：详解Vue2 SSR 缓存 Api 数据(vue缓存数据)
](https://www.jiuchutong.com/image/20240129/1706499634.jpg)
