【vue】多个vue单页应用history模式如何配合 nginx 使用
摘要:在使用微应用的场景中,history模式总有一些坑在等着我们,该篇文章主要解决了多个vue单页应用被nginx代理之后,在浏览器刷新的时候报404问题。
·
多个vue单页应用使用history模式如何配合 nginx 使用
多个vue单页应用使用history模式如何改造;
该项目使用了微应用,地址:微应用 doc
前端项目结构:
frontend6(主项目)
|-- project(子项目)
|-- project2(子项目)
父项目针对子项目路由配置:
const routes = [
{
name: 'project',
path: '/project',
component: () => import('@/views/project/index'),
meta: {
model: 'project',
info: { show_slider: true, is_inner: false },
},
children: [
{
name: 'micro',
path: '*',
component: () => import('@/views/project/index'),
meta: {
model: 'project_micro',
info: { show_slider: true, is_inner: false },
},
},
],
},
{
name: 'project2',
path: '/project2',
component: () => import('@/views/project2/index'),
meta: {
model: 'project2',
info: { show_slider: true, is_inner: false },
},
children: [
{
name: 'micro',
path: '*',
component: () => import('@/views/project2/index'),
meta: {
model: 'project2_micro',
info: { show_slider: true, is_inner: false },
},
},
],
},
].concat(Home);
Nginx配置
nginx 只需要配置对 / 的代理就可以了:
server {
listen 8099;
server_name localhost;
location / {
root /Users/mac/Desktop/frontend6;
add_header Cache-Control no-store;
add_header Pragma no-cache;
add_header Expires 0;
# 下面配置让所有的资源走根目录
proxy_set_header Host $host;
try_files $uri $uri/ @router;
index index.html index.htm;
}
# 不要漏掉这个
location @router {
rewrite ^.*$ /index.html last;
}
}
以上的配置完全可以完成history模式的配置,并且解决了浏览器中刷新页面出现 404 的问题。
更多推荐
已为社区贡献1条内容
所有评论(0)