vue 打包后图片、样式不显示

最新推荐文章于 2024-05-16 11:19:02 发布

原创最新推荐文章于 2024-05-16 11:19:02 发布 · 4k 阅读

9 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在Vue项目中遇到的样式、普通图片及背景图片不显示的问题，并提供了具体的解决方案，包括修改引用路径、调整配置文件等步骤，帮助开发者快速定位并解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、样式不显示

修改目录 dist ==> index.html 中引用路径

所有 /static/..... 相关的修改为 ./static.......

2、普通引用图片不显示

修改目录config ==> index.js

build:{

assetsPublicPath:'/', //修改为 assetsPublicPath:' ./ '

}

3、背景图片不显示

修改目录 build ==> utils.js

在下图中添加 publicPath:' ../../ '

4、在Vue-element-admin 组件中背景图片不显示

修改目录 build ==> utils.js

在下图中添加 publicPath:' ../../ '

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

vickylizy

关注关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-cli3+ 打包至非根目录静态资源(图片，字体文件)路径加载错误，导致不显示，丢失

weixin_42467467的博客

03-03

3117

缘由当开发vue项目时，ele字体图标显示无任何问题，然而当项目打包部署上线时，图片，字体文件等静态资源就丢失了，通过分析是因为项目打包时是非根目录，通过publicPath进行了配置，静态资源没有匹配到publicPath，因此打包出来的路径错误，导致页面不显示资源分析由于是打包至非根目录下，我们需要对webpack中的publicPath进行配置，同时记得修改router.js中的base地址 // 打包至非根目录下 // vue.config.js publicPath: "/tpls/vue/

解决Vue打包后访问图片/图标不显示的问题

01-19

大家可否遇到过 npm run build 打包后，项目在线上运行时，资源文件 (图片、图标)不显示的问题，接下来，我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件打开此文件后你会头晕，因为都是打包压缩过...

参与评论您还未登录，请先登录后发表或查看评论

vue-cli项目打包后样式空白（或者是样式出现一部分）

IT博客技术分享

09-26

3955

一. 如果是样式空白原因：路径不对，把配置文件中的路径都改为相对路径，在打包可能会好点。不然只能在打包后的文件中改相对路径，这样比较费劲。不建议使用。 vue-cli项目打包出现空白页和路径错误问题 vue-cli项目打包： 1. 命令行输入：npm run build 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目解决：到confi...

vue打包后背景图不显示

蒲小若的博客

12-21

809

这两天做了一个项目，在做好登录之后进行打包放到服务器上，在本地跑的时候一切正常，但是在服务器上跑的时候发现登录页面的背景图没有了，是一片空白，为此找到了一下解决方案在build 下的 utils.js中找到： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, ...

VUE项目打包（解决背景图片不显示问题）

优快云_Hss的博客

06-25

822

https://blog.youkuaiyun.com/qq_34611721/article/details/80996947

vue项目打包样式失效

黑玫瑰

06-02

760

场景一 main.js文件中引入的顺序不对，被覆盖了，调整下顺序就ok了场景二代码格式化的时候，格式不对导致的，调整为一行即可格式化给为下面这样就好了

vue-cli项目打包后样式空白（或者是样式出现一部分）_vue3 构建后部分样式丢失,重新构建后出现

2401_84434086的博客

05-16

748

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。很多人踩这个坑的时候花了很多时间，网上的教程基本上都是说的第一个坑，这个坑很少有人提起。这个坑是当你使用了路由之后，

解决vue项目在本地正常显示，打包后图片无法正常显示的问题

qq_40090480的博客

07-24

9332

在项目中使用图片，图片一般保存在static，或者assets目录的img里，而获取图片可以使用绝对路径或者相对路径，虽然在本地使用哪种方式没有影响，但由于vue的打包问题，如果采用绝对路径，打包至线上会导致无法正常显示图片，如下图：，当然这不是我们想要的结果，所以我们要通过将绝对路径改为相对路径的方式来解决这个问题。一般来说，相对路径有以下几种方式： 1.src="../../../../assets/img/upload.svg" 。其中../的次数由几级目录决定 2.:src="req..

vue 项目打包时样式及背景图片路径找不到的解决方式

10-16

通过上述方法，无论是使用vue-cli的哪个版本，都可以解决在Vue项目打包后遇到的样式和背景图片路径无法找到的问题。需要注意的是，在实际操作过程中，应根据项目的实际目录结构调整publicPath参数的值。最后，通过...

基于vue打包后字体和图片资源失效问题的解决方法

08-27

在开发Vue项目时，我们经常会遇到一个问题：在执行npm run build进行生产环境打包后，发现字体图标和图片资源无法正常显示，导致页面样式出现问题。这主要是由于Vue的Webpack配置在打包过程中对静态资源进行了处理，...

vue打包后显示空白正确处理方法

08-28

以下是一些解决 Vue 打包后显示空白页的常见方法： 1. **检查配置文件**： - 在 Vue 项目中，配置文件通常为 `vue.config.js`。我们需要确保这个文件存在，并且配置正确。如果你的项目没有这个文件，可以创建一个...

vue项目打包之后背景样式丢失的解决方案

10-17

在开发Vue项目时，我们经常会遇到一个问题：在项目打包完成后，部分页面的背景样式丢失，导致页面显示不正常。这主要是由于Vue CLI在构建过程中处理静态资源的方式导致的。本篇文章将详细介绍这个问题的原因以及提供...

vue 项目打包时样式及背景图片路径找不到

前端小菜鸟的博客

08-13

394

vue项目打包后，文件找得到，但是引用的字体及背景图片找不到; 方法：更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 注意配置这一部分，根据目录结构自由调整 fallback: 'vue-style-loader

vue-cli 打包出来的项目，scss,less样式里面的背景图无法显示，路径不正确

成茂峰

06-21

1625

解决方式：找到项目中的build/utils.js文件，找到如下代码： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ...

vue项目打包后部分图片不显示

qq_38969618的博客

02-03

2064

（1）图片的后缀名不能含ad字母敏感词（即谷歌会认为是广告，并自动删除）（2）图片本身（质量）的原因，跟前端无关，需让UI给新的设计图片。--备注：QQ直接截图到本地的图片打包后可能也不显示，需跟UI要原始设计图。 ...

vue项目打包部署后css样式失效

qq_35673096的博客

11-09

1656

发现不是路径问题，而是加载的不对，content-type:text-plain,而不是content-type:text/css，没解析出来，最后清缓存。项目部署后，样式失效，很奇怪，审查元素发现没有样式，不过却加载了css文件，问题出在哪里呢？

vue打包后路径失效、找不到、404的问题

qq_45747074的博客

07-05

4512

vue打包路径丢失的问题在vue项目打包以后，本地打开项目会出现css、js路径404的问题，这是因为vue打包后的路径默认是根路径。解决方法：在vue.cofign.js文件中将（如果没有vue.cofign.js文件，需要自行创建一个）...

vue项目打包后，elementUI 样式失效

qq_45083936的博客

05-14

2429

最近用vue写了一个官网踩坑了，打包时发现了有几个问题，element ui样式失效了一.页面一片空白并报错Failed to load resource: net::ERR_FILE_NOT_FOUND 第一次打包后发现页面一片空白，并且报错Failed to load resource: net::ERR_FILE_NOT_FOUND 解决方法： 1.webpack.prod.conf.js 中output添加参数publicPath:’./’ 2.修改webpack.base.conf.js中：

08-19

03-08

### 解决 Vue 和 Vite 项目中图片无法被打包的问题在处理 Vue 和 Vite 项目的打包过程中，如果遇到图片路径错误导致浏览器找不到资源的情况，通常是因为构建工具未能正确解析静态资源的相对路径或绝对路径。 #### 配置 `vite.config.ts` 为了确保图片能够被正确加载，可以在 `vite.config.ts` 中调整别名设置以及公共基础 URL： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': '/src', // 设置 @ 别名为 src 文件夹 }, }, base: './' // 如果部署在同一级目录下，则保持默认；如果是子目录，请指定相应的路径 }) ``` 当使用相对导入方式引入图像时，Vite 可能会将其视为模块依赖而非静态资产。因此建议采用如下方法之一来引用本地图片[^1]。 #### 正确引用图片的方式 ##### 方法一：通过 import 导入对于组件内部使用的图片，推荐利用 ES6 的 `import` 语句提前获取其最终地址： ```javascript <script setup> import logoUrl from '@/assets/logo.png'; </script> <template> <img :src="logoUrl" alt="Logo"> </template> ``` 这种方法可以让 Webpack 或者 Rollup 插件自动处理这些文件，并返回正确的 URL 给模板使用。 ##### 方法二：动态绑定 style 属性中的 background-image 如果你希望以 CSS 背景图的形式展示图片，可以通过计算属性或者函数形式传参给样式对象: ```html <div class="example" :style="{ backgroundImage: `url(${require('@/path/to/image.jpg')})` }"></div> ``` 注意这里的 `require()` 函数调用是为了让 bundler 知道这是一个需要特别对待的请求而不是普通的字符串字面量。 ##### 方法三：将图片放置于 public 文件夹内另一种简单的方法就是把所有公共资源放在项目的 `public/` 目录里边，这样可以直接按照相对于根路径访问它们而无需经过任何编译过程： ```html <img src="/images/example.png"/> ``` 只要保证实际发布后的服务器结构与此一致即可正常工作。 #### 修改 nginx 配置 (可选) 如果有条件修改 Nginx 配置的话，也可以考虑增加 location 模块映射 `/static` 请求至对应的实际位置，从而简化前端代码里的资源定位逻辑[^3]: ```nginx location /static/ { root /var/www/html/dist; } ``` 以上措施应该可以帮助解决大部分情况下由于路径不当引起的图片丢失现象。当然具体实施还需视个人应用场景灵活变通。