vue多页面应用

多页面应用本身和单页面应用没什么差别，无非是多了几个入口点。

入口点多的话，还可以写个函数扫描路径取添加入口点。

比较让人好奇的是路径的问题。我们要开发的时候要体现目录层级接口，所以入口文件是一层套一层的。但是部署后访问路径应该很短才行，最好是顶级路径。但这又只能改目录层级结构。

实际上这个功能是web服务器的路径重写完成的，并不是在项目中完成的。

比如这个路径

build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        personManage: resolve(__dirname, './src/pages/personManage/index.html'),
        documentManage: resolve(__dirname, './src/pages/documentManage/index.html')
      }
    }
  }

在浏览器里面要输入一长串

我们实际上要输入http://localhost:5234/src/pages/personManage/index.html

但希望的是输入http://localhost:5234/personManage

这可以配置路径

在vite的开发服务器是这样配置

import rewriteAll from 'vite-plugin-rewrite-all';
server: {
  // 自定义路由配置
  proxy: {
    '/personManage': '/src/pages/personManage/index.html',
    '/documentManage': '/src/pages/documentManage/index.html'
  }
}

在nginx是这样配置

location / {
      root /path/to/your/dist;
      try_files $uri $uri/ /index.html;
  }

  location /personManage {
      try_files $uri $uri/ /pages/personManage/index.html;
  }

  location /documentManage {
      try_files $uri $uri/ /pages/documentManage/index.html;
  }