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;
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律