vue发布nginx配置问题
0
悬赏园豆：5
[已解决问题]
解决于 2023-09-15 09:18
前端使用vue，并且是多入口的形式，index.html、admin.html，2个页面，nginx默认发布80端口，但是发现页面刷新的时候出现404，于是nginx配置中在localtion中添加
try_files $uri $uri/ /index.html;
解决了404问题，但是由于此处使用了固定值index.html，导致通过admin.html进入的部分刷新之后会默认走index.html这部分的路由页面中去，目前是通过多配置了一个端口指向同一个前端发布包，有没有人遇到类似的问题
最佳答案
1
如果你想要在多入口的情况下解决刷新页面导致的404问题，并且希望不同的入口能够正确加载对应的页面，可以考虑以下方法：
- 使用动态的try_files配置：可以通过使用nginx的变量来动态设置try_files指令，以根据请求的URL选择不同的入口文件。例如，可以使用正则表达式匹配URL中的路径，并根据匹配结果来选择不同的入口文件。下面是一个示例配置：
location / {
try_files $uri $uri/ /index.html;
}
location ~ ^/admin(/|$) {
try_files $uri $uri/ /admin.html;
}
在这个示例中，第一个location块仍然使用try_files $uri $uri/ /index.html来处理非admin路径的请求。而第二个location块使用try_files $uri $uri/ /admin.html来处理以/admin开头的路径请求，这样就可以正确加载admin.html作为入口文件。
- 使用重写规则：另一种方法是使用nginx的重写规则来将请求重写到正确的入口文件。可以使用rewrite指令将请求重写到对应的入口文件，然后使用try_files指令来处理重写后的请求。下面是一个示例配置：
location / {
try_files $uri $uri/ /index.html;
}
location /admin {
rewrite ^/admin(.*) /admin.html$1 last;
try_files $uri $uri/ /admin.html;
}
在这个示例中，第一个location块仍然使用try_files $uri $uri/ /index.html来处理非admin路径的请求。而第二个location块使用rewrite指令将以/admin开头的请求重写到/admin.html，然后再使用try_files $uri $uri/ /admin.html来处理重写后的请求。
收获园豆：5
