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;
  }
posted @ 2024-05-08 08:52  ggtc  阅读(43)  评论(0编辑  收藏  举报
//右下角目录