如何设置 nginx 来解决静态文件 vue 上找不到 404？

Question

我使用 nginx 来运行我的项目。所以我将 nginx 安装到我的本地主机来测试它

我在 localhost 上的配置 nginx 是这样的：

location / {
    root   html;
    index  index.html index.htm;
}

如果我刷新一个页面，它会出现这样的错误：

404 Not Found
nginx/1.14.0 (Ubuntu)

我在谷歌上搜索并得到一些参考。我尝试这样：

location / {
    root /www/dist;
    try_files $uri /index.html;
}

我工作。没有错误

然后我将我的项目部署到生产环境

我在生产中的配置 nginx 是这样的：

location / {
    root /www/dist;
    try_files $uri /index.html;
}

它也有效

但我的问题是我需要将位置更改为这样：

location /startup {
    root /www/dist;
    try_files $uri /index.html;
}

我在nginx中有很多项目。所以我必须添加/startup 以表明它是启动项目。但它会产生这样的错误：

404 Not Found
nginx/1.14.0 (Ubuntu)

我该如何解决这个问题？

Answer 1

当你在 nginx 中使用root 时，它总是追加到文件路径末尾的路由，但在使用/ 时这并不明显。因此，在您使用location / 的第一个示例中，它会在服务器上搜索此路径：

root + /www/dist + /

但是当你使用location /startup时，它会寻找这个不存在的路径：

root + /www/dist + /startup

所以要同时使用root 和“/startup”，您需要一个名为“startup”的目录。 但是，您可以使用别名。试试这个：

location /startup {
    alias /www/dist;
    try_files $uri $uri/ /startup/index.html;
}

Vue Router docs 也推荐类似的东西。 （但他们没有展示如何使用子文件夹alias。）