admin管理员组文章数量:1655803
1. vue-router
vue-router默认的路由模式是hash，我们要去掉url中的#需要将路由模式切换为history
const router = new VueRouter({
base: 'test', // 如果项目项目在 域名 根目录下，则去掉这行
mode: 'history', // 路由模式
...
})
这样子，url中的#就可以去掉了，在开发环境下不会出问题，部署上线后点击正常，但是…你一旦手动点击浏览器的刷新按钮，页面显示nginx的404页面。
怎么解决呢？在vue-router官网有说明：这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite/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）
location / {
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（）引用
2. hbuilder ==》 发行 网站PC端 或手机H5端时
路由模式 默认选择 hash ， 改为 history 则去掉 域名后面的 /#/
版权声明：本文标题：去掉 域名后面的 # vue-router 和 hbuilder发布 web项目和h5项目 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729706790a1210818.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论