资讯专栏INFORMATION COLUMN

vue项目如何去掉URL中#符号的方法

3403771864 / 826人阅读

  你们是否想过如何优化访问路径里的/#/,看起来有简单又美观,现在我们一起看看实现。现在就为大家展示解决方法。

  正常解决步骤

  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

相关文章

  • react学习日记第一记-webpack配置

    摘要:对于前端开发者来说,无论使用还是还是,打包工具的配置永远都是一个必须的过程,因为这决定了打包出来项目的大小,资源占用,以及运行速度。所以自己就动手尝试配置一下。 对于前端开发者来说,无论使用vue 还是react还是angular,打包工具的配置永远都是一个必须的过程,因为这决定了打包出来项目的大小,资源占用,以及运行速度。 由于之前的项目一直都是在使用vue,对于vue的webpa...

    Shonim 评论0 收藏0
  • react学习日记第一记-webpack配置

    摘要:对于前端开发者来说,无论使用还是还是,打包工具的配置永远都是一个必须的过程,因为这决定了打包出来项目的大小,资源占用,以及运行速度。所以自己就动手尝试配置一下。 对于前端开发者来说,无论使用vue 还是react还是angular,打包工具的配置永远都是一个必须的过程,因为这决定了打包出来项目的大小,资源占用,以及运行速度。 由于之前的项目一直都是在使用vue,对于vue的webpa...

    zhkai 评论0 收藏0
  • react学习日记第一记-webpack配置

    摘要:对于前端开发者来说,无论使用还是还是,打包工具的配置永远都是一个必须的过程,因为这决定了打包出来项目的大小,资源占用,以及运行速度。所以自己就动手尝试配置一下。 对于前端开发者来说,无论使用vue 还是react还是angular,打包工具的配置永远都是一个必须的过程,因为这决定了打包出来项目的大小,资源占用,以及运行速度。 由于之前的项目一直都是在使用vue,对于vue的webpa...

    233jl 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<