vue打包前后图片、资源路径问题，以及动态加载图片问题

最新推荐文章于 2025-06-23 16:52:49 发布

原创

最新推荐文章于 2025-06-23 16:52:49 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue打包路径问题 #vue图片资源路径问题

打包后css,js,文件路径问题（空白页面问题）

解决方法：

打开config下index.js,修改build中assetsPublicPath: ‘./’ （即将绝对路径修改为相对路径）

在这里插入图片描述

css背景图片路径问题

解决方法：
打开build/utils.js，修改如下：
在这里插入图片描述

随着更新,这一点已完善了,不需要修改了

assets或static目录下， img资源动态绑定问题

template中img路径动态绑定，案例如下

  <template>
        <div>
              <img  :src="imgSrc"    />
              <img  :src="imgSrc01"    />
              <img  :src="imgSrc02"    />
      </div>
 </template>
 <script>
   export default({
       data(){
           return {
              imgSrc:'../../s