vue-router、nginx 和直接链接答案

【问题标题】：vue-router, nginx and direct linkvue-router、nginx 和直接链接
【发布时间】：2018-08-10 20:56:26
【问题描述】：

我正在尝试在我的 nginx 服务器上设置一个 vue-router。我遇到的问题是，如果我直接将 url 输入到浏览器 myapp.com/mypath，我的路由将不起作用。

我已经尝试了vue router docs 中描述的服务器配置以及堆栈溢出时建议的类似配置。我当前的nginx位置配置如下：

location / {
    try_files $uri $uri/ /index.html;
}

location /subscribe {
    proxy_pass http://127.0.0.1/subscribe // express API app
}

所做的只是将任何路径重定向到我的根组件（路径：/）而不是/mypath。这确实有道理，location 似乎只重定向到索引文件。如何在我的 VueJS 应用程序中将 myapp.com/mypath 的直接链接重定向到 /mypath 路由？

这是我现在的 vue 路由设置方式：

...
const routes = [
    { path: '/', component: Landing },
    { path: '/mypath', component: MyPath }
];

const router = new VueRouter({ mode: 'history', routes });

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

【问题讨论】：

是的，这是一个错字，但这与我遇到的问题无关。我添加了这个以防万一，以表明我还有其他 location 选项。我现在已经更正了
您是否尝试过从第一个位置配置中删除 $uri/ ？我正在使用这个（甚至没有配置任何其他位置顺便说一句），它似乎保留了 /mypath 附加。

标签： nginx vue.js vuejs2 vue-router

【解决方案1】：

我挣扎了几个小时来解决同样的问题。毕竟这些配置对我有用：

events {
...
  http {
  ...
    server {
          listen       80;
          server_name  localhost;

          location / {
              root   /path/to/your/project/html;
              index  index.html index.htm;
              include  /etc/nginx/mime.types;
              try_files $uri $uri/ /index.html;
          }
    }
  }
}

我的路由器设置和你几乎一样。

【讨论】：

这个工作完美，尤其是在try_files $uri $uri/ /index.html;这一行，这是最重要的
我不明白。 try_files 与原始问题完全相同。怎么回事？

【解决方案2】：

根据同事的建议，我找到了 1 个可能的解决方案。

我现在在 nginx 中将 URI 作为查询参数传递。所以我的配置现在是这样的：

location / {
    try_files $uri $uri/ /index.html?uri=$uri
}

然后在我在 VueJS 中的路由器配置中：

const routes = [
{
    path: '/',
    component: Landing,
    beforeEnter: (to, from, next) => {
        const { uri } = to.query;
        if (uri != null && uri != '/') {
            next(false);
            router.push(uri);
        } else {
            next();
        }
    }
}, ...

这似乎可以解决问题，尽管看起来有点狡猾。

【讨论】：

【解决方案3】：

转到：/etc/nginx/sites-enabled
为您的域打开配置

在'root'下添加如下代码

location / {
  try_files $uri $uri/ /index.html;
}

保存文件
使用命令重启你的 nginx 服务器：/etc/init.d/nginx restart
刷新浏览器

【讨论】：

这根本解决不了问题。貌似是如何配置nginx“入门”的复制粘贴……
这是一个很好的答案，因为在 location 行中添加了 index.html。

【解决方案4】：

你是否在 vue.conf 和 nginx 中使用了自定义公共路径（mypath）？

如果是这样，您需要更改配置以匹配该路径。

location /mypath {
    try_files $uri $uri/mypath /mypath/index.html
}

【讨论】：

【解决方案5】：

好吧，我遇到了同样的问题，所以我尝试将每个 404 错误重定向到根 url，它完美地工作。

转到：/etc/nginx/sites-enabled
打开默认配置文件
在 404 重定向的位置之前添加此行：

error_page 404 /;

保存文件别忘了重启nginx

【讨论】：

【解决方案6】：

我的建议是确保按照 vue-router 文档中的建议使用下一行。但是，此外，如果您有多个文件来设置您的 nginx 服务器，例如一个用于设置服务器 SSL 的文件，请确保将其也包含在这些文件中。

location / {
  try_files $uri $uri/ /index.html;
}

【讨论】：