vue 图片地址的问题与项目路由的问题

tech2025-08-14  6

vue 中图片打包位置使用绝对路径常常在项目加上项目名称之后就无法正常访问了,其实也可以直接写static/images/uncheck.png,开头不需要/,图片访问就会自动加上你当前访问的路径

不要相信那些花里胡哨的配置,没用,并且会越配置越乱。理解浏览器相对路径和绝对路径才是王道。

图片写在vue文件中

/*使用相对路径,vue会自动的将图片数据打包*/ background: url(../../../static/images/uncheck.png) no-repeat;

图片写在src中

<!--使用相对路径--> <img src="../../../static/images/btn_search.png" class="searchImg" @click="attrQuery" />

路由问题:

当我们在端口号后面加上根路径之后需要配置一下vue路由的根路径,默认是/。

感觉还是有点小麻烦。。。需要自己建一个配置js文件然后在index.html页面引入(放到app上面让他先加载)

export default new Router({ base: window.RouterBaseUrl, //提取配置文件存放 mode: 'history', // 去掉url中的# routes: [ { path: '/', name: 'Index', component: Index } ] })

 

最新回复(0)