【vue-router】关于在vue2使用vue-router的hash模式与history模式对引入图片资源的影响以及解决方案

项目场景：

环境：vue2+vue-router3，使用vue-cli脚手架进行项目的搭建，路由采用history路由

图片资源的引入

 <div class="imgs">
          <img class="img" src="../assets/image/warning.png" />
 </div>

路由的配置

 {
    
    
    path: '*',
    name: 'Index',
    component: Index,
    meta: {
    
    
      title: '',
      keepAlive: true
    }
  },
  {
    
    
    path: '/bind',
    name: 'BindAccount',
    component: Bind,
    meta: {
    
    
      title: '',
      keepAlive: true
    }
  },

---

问题描述

1、本地图片资源显示正常，但是部署到线上资源路径有误。

2、首页图片资源引入正确，但其他页面图片资源路径有误

---

原因分析：

hash模式

在hash模式下，URL中的路由信息会以#符号后面的部分表示，如：http://example.com/#/about。因为#后面的内容不会被发送到服务器，所以在使用hash模式时，页面的切换不会触发对服务器的请求。这使得前端路由更容易实现，图片的引用路径可以使用相对路径或绝对路径，例如：

<img src="/images/example.jpg" alt="Example Image">

<img src="../images/example.jpg" alt="Example Image">

history模式

在history模式下，URL的路径会更像传统的URL，没有#符号，例如：http://example.com/about。这样的URL更美观，并且对搜索引擎更友好。在history模式下，页面切换时，实际上会向服务器发送请求

对于图片资源引入，由于URL的路径会随着路由的切换而改变，使用相对路径可能会导致图片加载错误，特别是在嵌套路由的情况下。为了确保图片资源的正确引入，应该使用绝对路径，例如：
（我不推荐这种做法，因为这会导致线下调试困难）

<img src="/images/example.jpg" alt="Example Image">

---

解决方案：

我们默认都使用绝对路径，代码提示也是绝对路径

采用history模式

需要设置一个base参数，base参数是项目的基础路径，这里如果我们部署的环境是https:xxxx.com/static-m/项目名称/index.html,那么base参数为/static-m/项目名称/，这样所有的资源的引入都会基于这个基础路径去引入

注意：如果修改了项目名称，那么这里的值也要修改！

const router = new VueRouter({
    
    
  //如果打包部署上线图片显示不正确，注意修改这里！
  base: '/static-m/项目名称/',
   mode: 'history',
  routes
})

采用hash模式

注释掉即可，默认就是采用hash模式，

const router = new VueRouter({
    
    
  //如果打包部署上线图片显示不正确，注意修改这里！
  //base: '/static-m/项目名称/',
   //mode: 'history',
  routes
})

同时配置路由，默认重定向到首页

{
    
    
    path: '/',
    redirect: '/index'
  },
  {
    
    
    path: '/index',
    name: 'Index',
    component: Index,
    meta: {
    
    
      title: '',
      keepAlive: true
    }
  },