Vue:nginx 设置在开发模式下有效,在生产模式下失败

Vue:nginx 设置在开发模式下有效,在生产模式下失败

我有一个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

我觉得有理由可以解决这个问题

  1. 您需要在 NginX 上设置项目的服务名称而不是 localhost,然后需要在 nginx 上设置服务的内部端口

喜欢 :

location ~ ^/vue/ {
     proxy_pass http://<your_service>:<inside port>
}

相关内容