vue-router、nginx 和直接链接

Posted 2023-02-22

【中文标题】vue-router、nginx 和直接链接

【英文标题】：vue-router, nginx and direct link

【发布时间】：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 附加。

【参考方案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;