我有一个nginx
这样的配置:
server {
server_name lionchortle.lol;
location ~ ^/vue {
proxy_pass http://localhost:8085;
}
location ~ ^/vue/ {
proxy_pass http://localhost:8085;
}
location ~ ^/page {
root /lionchortle;
try_files $uri.html $uri =404;
index index.html;
}
}
...
我有以下目录层次结构:
/
lionchortle
page.html
vue
src
package.json
node_modules
...
当我在开发模式下部署 Vue 项目时:
npm run serve -- --port 8085
将http://lionchortle.lol/vue
显示 Vue 应用程序的起始页。
但是当我尝试在生产模式下部署时:
npm run build
npx serve dist -l 8085
我只能通过访问 来查看 Vue 项目http://lionchortle.lol:8085
。访问http://lionchortle.lol/vue
显示如下页面:
404 the requested path could not be found
。
总是会http://lionchortle.lol/page
起作用(显示page.html
)。
为什么切换到生产模式会导致 nginx 配置中断?
答案1
我唯一能想到的是你没有定义根指令位置 ~ ^/vue/。
当 Nginx 配置中未定义 root 指令时,Nginx 将尝试从文件系统上的默认位置提供内容。默认位置因 Nginx 安装和操作系统而异。所以我的建议是在服务器名称指令。像这样:
server {
server_name lionchortle.lol;
root /var/www/lionchortle;
location ~ ^/vue {
proxy_pass http://localhost:8085;
}
location ~ ^/vue/ {
proxy_pass http://localhost:8085;
}
location ~ ^/page {
root /lionchortle;
try_files $uri.html $uri =404;
index index.html;
}
}
答案2
我觉得有理由可以解决这个问题
- 您需要在 NginX 上设置项目的服务名称而不是 localhost,然后需要在 nginx 上设置服务的内部端口
喜欢 :
location ~ ^/vue/ {
proxy_pass http://<your_service>:<inside port>
}