前言
最近,同事跟我说,项目的访问路径里的/#/挺不美观的,就下手尝试去掉,本以为就是一句代码搞定的事情,结果遇到不少问题。
现在把我遇到的情况记录下来,做个存档,如果看到文章的有缘人刚好遇到跟我一样的情况,我的内容能提供多一个解决方案也是不错的。
正常解决步骤
1. 设置路由mode
router的默认mode为hash模式,关于hash模式,官方文档这样描述:
它在内部传递的实际 URL 之前使用了一个哈希字符(#)。由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。不过,它在 SEO 中确实有不好的影响。如果你担心这个问题,可以使用 HTML5 模式。
– — 《Vue Router官方文档》
当使用这种历史模式时,URL 会看起来很 “正常”,例如 https://example.com/user/id。漂亮!
这正符合我们的需求。于是在我们的项目中启动路由mode的history模式:
let Router = new VueRouter({
mode: 'history',
routes: [...]
...
});
2. 配置服务端nginx
不过,问题来了。由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id,就会得到一个 404 错误。这就丑了。
不用担心:要解决这个问题,你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源,它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!
按步骤1修改完,部署到服务器之后,URL中的#确实没有了,但是当刷新页面,或者页面中有使用window.open打开的页面时,会出现404错误。
按官方文档的说明,需要配置服务器的回退路由,我们的环境是使用的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";
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;
}
devServer: {
...
proxy: {
...
'/api': {
target: url,
changeOrigin: true,
logLevel: 'debug'
},
},
...
}
结尾
至此,我的项目终于在生产环境以及开发环境都运行正常了,撒花✿✿ヽ(°▽°)ノ✿
原文地址:https://blog.csdn.net/sunliyings17/article/details/124016692
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_42432.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!