Vue-CLI 3.x 搭建多页面项目配置

记录下由于新需求要使用多页面（MPA）模式，记录下关于项目配置的信息。

在官方文档上是这样配置的：

配置多页应用

官方文档省略了项目的改动，例如下图，compose.html装载的就是\src\pages\compose\里面的完整SPA项目：

image.png

总结

一个页面一套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`);
})