你们是否想过如何优化访问路径里的/#/，看起来有简单又美观，现在我们一起看看实现。现在就为大家展示解决方法。
正常解决步骤
1. 设置路由mode
先说下router的默认mode为hash模式，有关于hash模式介绍如下：
hash并不能作为传递，也无法将URL发送到服务器中，因此，无法到服务器中进行处理。而且它对于SEO优化也有不好的影响。我们可以换换想法，用可以使用 HTML5 模式。
– -- 《Vue Router官方文档》
而关于history模式，官方文档是这样说的：
现在我就看看这种模式下的URL，怎么样， 看起来很 “正常”，例如 https://example.com/user/id。漂亮!
对于我们的需求也十分满足。于是在我们的项目中启动路由mode的history模式：
let Router = new VueRouter({
mode: 'history',
routes: [...]
...
});2. 配置服务端nginx
关于history模式，官方文档还提到：
其中要有一个问题要我们解决，就是应用是一个单页的客户端应用，假如在没有适当的服务器配置情况下，访客直接在浏览器中输入网址，出现的就会是404页面。
解决：其实我们只要在所属服务器上添加一个简单的回退路由。当在你的 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。
即使完成上述步骤，还是没有彻底解决问题，因此，我们还需要后续。按官方文档的说明，需要配置服务器的回退路由，我们的环境是使用的nginx，使用以下配置解决了刷新404的问题
location / {
try_files $uri $uri/ @router;
index index.html index.htm app.html app.htm;
}
location @router {
rewrite ^.*$ /index.html break;
}如果你的环境是apache或者其他服务器，可以参考官方文档进行配置
可能碰到的问题
1. 静态资源Uncaught SyntaxError: Unexpected token < 问题
在使用相对路径获取静态资源，例如 <img src="./img/xxxx.png" /> 这种方式展示的图片，这些反馈的就会是 Uncaught SyntaxError: Unexpected token < 404找不到资源的异常，主要是就是启用history模式后相对路径造成的问题，但我们要是将 vue.config.js 文件中 publicPath 或者 bashUrl 从./ 相对路径修改为 / 绝对路径就可以轻松解决。
publicPath = '/';
我的项目环境中 http://localhost:8080/ 后没有需要添加固定的路径，如果你的有（比如 http://localhost:8080/domain/），需要按你的情况进行调整
2. api接口请求404问题
其实问题还是有，在检查时发现有些接口出现了404的情况， 现在我们就可以用api 的axios 配置时的路径配置存在相对路径的使用，需要进行修改。
调整之前的配置:
export const exampleApi = (id) => {
return request({
url: 'xxx/xxx/' + id,
method: 'get',
})
}配置修改为:
export const exampleApi = (id) => {
return request({
url: '/xxx/xxx/' + id,
method: 'get',
})
}3. 开发环境（npm run dev启动）刷新404的问题
其实这样问题也一直困扰我，直至在开发环境调试时，为了解决跨域问题，就需要设置配置 webpack devServer 的 proxy，这样代为处理所有的请求，这样就通过使用 bypass 绕过html，问题就此解决
# vue.config.js文件
devServer: {
proxy: {
'/': {
target: url,
...
bypass: function (req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
},
},
}
}4. 前端路由与服务端接口路由冲突问题
在解决前面问题之后，在排查时任然发现部分页面在刷新出现错误。检查很多地方，直至我们检查到nginx的配置时，出现这些错误的原因是页面的路由，与服务端的接口路由似乎是重合的！由此将前端页面的路由被nginx匹配到服务端的路由，这样就是直接转接到服务端去处理，异常就由此产生！
解决问题的思路为，前端程序中给所有的接口添加统一的路由前缀入口，nginx转发时匹配这个统一的前缀即可。
axios.js：
# 设置bashURL axios.defaults.baseURL = "/api";
nginx配置文件：
location ^~ /api/ {
proxy_pass http://pig-gateway:9999/;
# proxy_set_header Host $http_host;
proxy_connect_timeout 60s;
proxy_send_timeout 45s;
proxy_read_timeout 450s;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}开发环境跨域设置调整
vue.config.js：
devServer: {
...
proxy: {
...
'/api': {
target: url,
changeOrigin: true,
logLevel: 'debug'
},
},
...
}结尾
有关于vue项目如何去掉URL中#符号的方法已经叙述完毕，希望大家后续多多关注。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/127806.html
摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。 对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。 由于之前的项目一直都是在使用vue，对于vue的webpa...
摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。 对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。 由于之前的项目一直都是在使用vue，对于vue的webpa...
摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。 对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。 由于之前的项目一直都是在使用vue，对于vue的webpa...
摘要：对于前端开发者来说，无论使用还是还是，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。所以自己就动手尝试配置一下。 对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。 由于之前的项目一直都是在使用vue，对于vue的webpa...
摘要：利用了中新增的和方法。如果不想要很丑的，我们可以用路由的模式，这种模式充分利用来完成跳转而无须重新加载页面。模式下，前端的必须和实际向后端发起请求的一致，如。如果后端缺少对的路由处理，将返回错误。 Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#...
阅读 277·2023-03-27 18:33
阅读 615·2023-03-27 17:49
阅读 437·2023-03-26 17:27
阅读 296·2023-03-26 17:14
阅读 323·2023-03-17 21:13
阅读 270·2023-03-17 08:28
阅读 1342·2023-02-27 22:32
阅读 845·2023-02-27 22:27
