vue-router 去掉#

vue

  注:假设你的项目访问地址为  http://www.a.com/test

  router" title="vue-router">vue-router默认的路由模式是hash,我们要去掉url中的#需要将路由模式切换为history

const router = new VueRouter({
 base: 'test', // 如果项目项目在 域名 根据目录下,则去掉这行

mode: 'history',

...

})

  这样子,url中的#就可以去掉了,在开发环境下不会出问题,部署上线后点击正常,但是...你一旦手动点击浏览器的刷新按钮,页面显示nginx的404页面。

  怎么解决呢?在vue-router官网有说明:这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

  所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。我们线上的服务器用的是nginx,需要改为下面的配置:

location ^~/test {

     alias   D:/project/card-web/code/dist/;

try_files $uri $uri/ @card;

}

location @card {

rewrite ^/(test)/(.+)$ /$1/index.html last;

}


# 项目部署在服务器/下
(访问地址:http://www.a.com)

 {

root D:/project/card-web/code/dist/;

try_files $uri $uri/ /index.html;

}

  这样子,无论你怎么刷新页面都不会报404了。。。贼开心。。。如果你是用vue-cli创建的工程的话,你可能会在线上看到报错:所有的静态资源都返回的 index.html 文件 , css或者js请求失败

  默认的静态资源生产环境构建配置应该为:

// config/index.js

build : {

assetsPublicPath: "./"

}

  上述nginx配置的意思就是说以 test  开头的路径都会返回index.html,而我们构建时的静态资源还是相对位置(相对于index.html的位置),如果我们把静态资源都是设置为根路径(以 / 开头),浏览器会直接从域名根路径开始请求(相对于域名的位置),请求的静态资源路径nginx就能找到,就不用rewrite,

所以我们修改如下:

// config/index.js

build : {

assetsPublicPath: "/test/", // 如果项目项目在 域名 根据目录下,则为 "/"

}

总结:

请求静态资源nginx直接返回,www.baidu.com/test/a/b 等这种路径nginx统一返回 index.html

我们在工程引用静态资源(css或者图片)需要使用相对路径,如果在js中引用需要require()引用

以上是 vue-router 去掉# 的全部内容, 来源链接: utcz.com/z/376605.html

回到顶部