记录下由于新需求要使用多页面(MPA)模式,记录下关于项目配置的信息。
在官方文档上是这样配置的:
官方文档省略了项目的改动,例如下图,compose.html
装载的就是\src\pages\compose\
里面的完整SPA项目:
总结
一个页面一套SPA,入口文件、路由、资源的路径都要根据实际情况进行设置。
更新
页面间跳转问题
在页面内可以继续使用SPA
模式的<router-link>
,但是页面之间的跳转需要使用:
<!-- index.html -->
<a href='/compose.html'>前往compose页面</a>
刷新不显示当前路由/404问题
实践中发现在非首页的非首路由下,虽然能正常显示组件,但是进行刷新会出现找不到路由情况,解决方法是采用hash
路由模式:
// router.js
// mode: "history", 默认设置
mode: "hash",
这样,不同页面之间的指定路由跳转也可以这样实现:
<!-- index.html -->
<a href='/compose.html#/paper/library'></a>
该问题是由于history
模式需要后台支持,而本地开发的webpack-dev-server
服务只默认配置了单页应用的路由index.html
。
所以还可以通过不使用默认webpack-dev-server
,自定义一个本地服务来解决。
/**
* 自定义路由
* */
// http://localhost:8080/
router.get('/', (req, res, next)=>{
sendFile(pathJoin('index.html'), res, next);
});
// http://localhost:8080/home 分配 home.html
router.get('/:home', (req, res, next) => {
sendFile(pathJoin(req.params.home + '.html'), res, next);
});
// http://localhost:8080/index
router.get('/:index', (req, res, next) => {
sendFile(pathJoin(req.params.index + '.html'), res, next);
});
module.exports = app.listen(PORT, err => {
if (err){
return
}
console.log(`Listening at http://${HOST}:${PORT}\n`);
})