[vue-router] Con respecto al impacto y las soluciones del uso del modo hash y el modo historial de vue-router en la introducción de recursos de imágenes en vue2

Escenario del proyecto:

Entorno: vue2 + vue-router3, use el andamio vue-cli para construir el proyecto y use el enrutamiento histórico para el enrutamiento

La introducción de recursos de imagen.

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

Configuración de enrutamiento

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

---

Descripción del problema

1. Los recursos de imágenes locales se muestran normalmente, pero la ruta implementada a los recursos en línea es incorrecta.

2. Los recursos de imágenes en la página de inicio se introducen correctamente, pero las rutas de los recursos de imágenes en otras páginas son incorrectas.

---

Análisis de causa:

modo hash

En modo hash, la información de enrutamiento en la URL estará representada por la parte después del símbolo #, como por ejemplo: http://example.com/#/about. Debido a que el contenido después de # no se enviará al servidor, cuando se usa el modo hash, el cambio de página no activará una solicitud al servidor. Esto hace que el enrutamiento frontal sea más fácil de implementar. La ruta de referencia de la imagen puede usar una ruta relativa o una ruta absoluta, por ejemplo:

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

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

modo historia

En el modo historial, la ruta URL se parecerá más a una URL tradicional sin el símbolo #, por ejemplo: http://example.com/about. Estas URL son más hermosas y amigables para los motores de búsqueda. En el modo historial, cuando la página cambia, se enviará una solicitud al servidor.

Para la introducción de recursos de imágenes, dado que la ruta de la URL cambiará a medida que se cambie la ruta, el uso de rutas relativas puede provocar errores en la carga de imágenes, especialmente en el caso de rutas anidadas. Para garantizar la introducción correcta de los recursos de imagen, se deben utilizar rutas absolutas, por ejemplo:
(No recomiendo este método porque dificultará la depuración sin conexión)

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

---

solución:

Todos usamos rutas absolutas de forma predeterminada y las indicaciones del código también son rutas absolutas.

Usar el modo historial

Debe establecer un parámetro base. El parámetro base es la ruta base del proyecto. Si nuestro entorno de implementación lo es, entonces el https:xxxx.com/static-m/项目名称/index.htmlparámetro base es /static-m/项目名称/, de modo que todos los recursos se introducirán en función de esta ruta base.

Nota: Si se modifica el nombre del proyecto, ¡el valor aquí también debe modificarse!

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

Usar modo hash

Simplemente coméntelo, el valor predeterminado es usar el modo hash.

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

Al mismo tiempo, configure el enrutamiento y redireccione a la página de inicio de forma predeterminada.

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