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;
}