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 @   ggtc  阅读(105)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
//右下角目录
点击右上角即可分享
微信分享提示