淘先锋技术网

首页 1 2 3 4 5 6 7

项目场景:

环境: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模式时,页面的切换不会触发对服务器的请求。这使得前端路由更容易实现,图片的引用路径可以使用相对路径或绝对路径,例如:

history模式

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

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


解决方案:

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

采用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
    }
  },