vue-router 去掉#

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部