vue路由器、nginx和直接链路

Question

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

我尝试了vue路由器文档中描述的服务器配置，以及建议的堆栈溢出类似配置。我当前的nginx位置配置如下：

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

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

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

以下是我的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)
});

Answer 1

>

得： /etc/nginx/sites-enabled

打开域的配置文件

在“root”下添加以下代码

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

保存文件

使用以下命令重新启动nginx服务器：/etc/init.d/nginx restart

刷新浏览器

Answer 2

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

我现在在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();
        }
    }
}, ...

这似乎起到了作用，尽管看起来有点狡猾。

Answer 3

我为解决同一个问题挣扎了好几个小时。在所有这些配置对我起作用之后：

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;
          }
    }
  }
}

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