你们是否想过如何优化访问路径里的/#/,看起来有简单又美观,现在我们一起看看实现。现在就为大家展示解决方法。
正常解决步骤
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...
阅读 546·2023-03-27 18:33
阅读 731·2023-03-26 17:27
阅读 629·2023-03-26 17:14
阅读 590·2023-03-17 21:13
阅读 519·2023-03-17 08:28
阅读 1800·2023-02-27 22:32
阅读 1291·2023-02-27 22:27
阅读 2176·2023-01-20 08:28