如何解决带有 nginx 的子目录上的 Vue 前端应用程序
我有一个 nuxt 应用程序部署为使用 nginx 反向代理的主网站。 设置如下
location / {
proxy_pass http://127.0.0.1:3000;
}
现在我在同一台服务器上有另一个 vue 应用程序,我想在子路径上运行,例如https://www.app.com/dashboard
下面是我对 nginx 和 vue 路由器的设置
location ^~ /dashboard {
alias /srv/www/dashboard-app/dist;
try_files $uri $uri/ /srv/www/dashboard-app/dist/index.html;
}
const router = createRouter({
history: createWebHistory('/dashboard'),routes,})
当我访问 /dashboard 并且 vue 应用呈现良好时,我能够加载我的主仪表板。
但是,如果我访问子路径,例如/dashboard/team nginx 似乎与我的仪表板路径不匹配,它将请求传递给 /(根)上的 nuxt 应用程序,该应用程序在返回时抛出 404 作为在我的 nuxt 应用程序中有匹配 /dashboard/team 的路径
解决方法
try_files 的最后一个参数可以是 =status_code
或 uri
。
当它是 uri
时,它将再次与定义的位置块匹配。
在您的情况下,它与默认路由匹配,即 nuxt 代理。
以下配置应该适合您。
server {
listen 80;
root /srv/www/dashboard-app/dist;
location ~ ^/dashboard(.*) {
# we want to remove the dashboard prefix and match the static file requests
# or serve the /index.html route.
try_files $1 /index.html;
}
location = /index.html {
# this should not be a public url
# this should only be served when it is requested internally
internal;
}
# add any other static file extensions that you want to serve
location ~ (\.css|\.js)$ {
internal;
}
location / {
# best to include this
include proxy_params;
proxy_pass http://127.0.0.1:3000;
}
}
,
似乎我在仪表板 nginx 块中缺少尾部斜杠! 工作解决方案如下
location ^~ /dashboard {
alias /srv/www/dashboard-app/dist/;
try_files $uri $uri/ /index.html = 404;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。