Question

我试图在我的nginx服务器上设置vue-router。我遇到的问题是，如果我直接向浏览器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)
});

Answer 1

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

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

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 2

我为解决同一问题奋斗了几个小时。毕竟，此配置对我有用：

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

我的路由器设置几乎与您相同。

Answer 3

已转到：/ etc / nginx / sites-enabled
打开您域的配置
在“ root”下添加以下代码

位置/ { try_files $ uri $ uri / /index.html; }
保存文件
使用以下命令重新启动您的Nginx服务器：$scope.submitDataCorrection = function () { for (i=0;i<cntSelLS;i++){ //per Form //CHECK FIELDS AND SET VALIDITY OF EACH FIELD } isValid = $scope.ownerFrm.$valid; //get validity if (isValid){ //if valid //do things } else{ //do things to get error message alert(errmsg) $window.scrollTo(document.querySelector('input.ng-invalid').offsetTop,0) //error always happens here. i dont think it can find the ng-invalid elements } }
刷新浏览器
为我祈祷：）

Answer 4

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

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

error_page 404 /;

保存文件不要忘记重启nginx

Answer 5

您是否在 vue.conf 和 nginx 中使用自定义公共路径 (mypath)？

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

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

vue-router，nginx和直接链接

5 个答案: