vue中无法访问静态资源

最新推荐文章于 2025-03-15 00:00:00 发布
最新推荐文章于 2025-03-15 00:00:00 发布
阅读量3.8k 收藏 2
点赞数 3
分类专栏： SSM 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45555170/article/details/111354968
版权

vue中无法访问静态资源

原因：

主要是项目的图片没有放到正确的路径之下，就基本上会出现vue访问不到静态静态资源的问题

解决

将所需要的图片放到static中就可以了，在读取对象的属性的时候只需要把照片的路径写准确即可，可以直接写路径访问到
在这里插入图片描述
在这里插入图片描述
在 static/img/ 后面直接加图片名称.这样项目中就能访问到了
在这里插入图片描述
大致就是一个这样的路径

看看效果

在这里插入图片描述

这样就能访问vue项目中的静态资源了

Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
蓝胖子的博客
04-03 2274
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
vue打包之后，放到服务器上访问不到static文件夹下面的html文件，该如何解决
weixin_39418338的博客
07-02 5945
​以前都是和团队合伙开发前端，从不接触设置打包配置项。现在公司前端一个人，要自己学会配置。最近写公司官网，vue文件打包之后，在项目里面通过window.open()访问放在static下的html文件，放在公司服务器访问不到static下面的文件，问题出现在打包配置项上。 vue组件里面使用：window.open("/static/pro/protocol_privacy.html"); // 错误的写法 因为我打包配置不是在根目录下（/），而是放在/home/目录下，所以访问静态页面时...
彻底解决 Vue 打包后静态资源图片失效的终极指南
最新发布
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
03-15 2169
彻底解决 Vue 打包后静态资源图片失效的终极指南
vue项目使用webpack打包后部署到服务中无法读取静态资源
followly的博客
12-11 2271
在打包vue项目时，因为通过脚手架生成的项目，部署到服务中会出现读取静态资源404的情况
vue本地运行项目获取static中文件找不到问题，更新不生效
qq_35388369的博客
06-19 764
原因：由于运行配置了proxyTable代理 ‘/’，所有的网络请求都被代理，获取到静态文件实际上是代理服务器上的文件，所以本地修改static文件下的操作都不会生效。问题：vue本地运行项目，获取static静态文件夹中文件找不到，更新文件之后运行没有变化。解决办法：在全局代理’/'下，忽略掉static请求的代理。
解决vue打包后部署到服务器找不到静态资源问题
ct5211314的博客
12-28 9874
我们将项目打包后放到服务器上，会报找不到静态资源的错误。 一、错误原因 将项目打包后放在服务器上会默认在根目录上去找静态资源，但我们并没有将资源放在根目录上 二、解决方案新增vue.config.js文件 与后台沟通好服务器资源所放位置 module.exports = { publicPath: process.env.NODE_ENV === "development" ? "" : "/h5/pharmacy", }; ...
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，...以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
总结以上知识点，当你在Vue CLI 3项目中遇到public文件夹静态资源报错的问题时，应该首先检查你的资源引用路径是否正确。根据你的项目部署路径，设置合适的`process.env.BASE_URL`环境变量，然后通过`vue.config.js`...
详解vue静态资源打包中的坑与解决方案
11-28
①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后...
解决vue打包之后静态资源图片失效的问题
08-28
在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的出现主要是由于图片的引入路径和静态资源文件的...
vue加载静态文件，不解析到路径
qq_34631220的博客
03-10 523
在public文件夹新建static文件夹 如何房static文件夹的内容直接/static/文件名，就可以了
vue项目静态图片不显示
xuanyuyao的博客
09-14 1166
vue项目静态图片不显示 1、解决方式一 在data里使用require导入静态图片再使用 2、方式二直接在img标签src里写入相对地址
Vue踩坑之二级路由下静态资源加载失败
weixin_44735933的博客
03-11 3086
在使用vue开发过程中意外发现 , 当我的路由加到二级时我的页面背景突然没了? 这是怎么回事呢? 让我们先来复现一下问题吧 起初我的登陆页面的路由是这样子的 我的背景图片是在外部的一个css中写着的 这个外部css文件我是在index.html中全局引入的 , 按理来说 , 在全局引入了css , 那么我的所有组件 , 所有路由都应该可以访问到我自己写的这个css的内容的 , 也就是说我不管写什么路径都应该可以看到自己的背景图片的 给大家先看下我的index.html文件中是怎么引入的这个外部css
Vue--解决build静态资源后无法直接访问问题
随便写写
07-08 6632
问题原因，打包之后访问路径错误，index.html打开是空白， F12报错找不到引用文件，一看引用在了根目录（文件所在盘，如：C盘、E盘） 解决 步骤1，修改使用路由方式 将路由从history换成hash const router = new VueRouter({ mode: "hash", base: process.env.BASE_URL, routes }); 步骤2，修改使用配置文件 // vue.config.js module.exports = { // 解决
解决springboot+vue静态资源刷新后无法访问的问题
一只没有脚的鸟
05-14 1119
原项目是有前后端分离设计，测试环境是centos系统，采用nginx代理和转发，项目正常运行。 项目近期上线到正式环境，结果更换了系统环境，需要放到一台windows系统中，前后端打成一个jar包，然后做成系统服务。这台服务器中已经有很多其他服务，都是采用一样的部署方式，所以没办法只能对这个项目进行修改。
电脑 Vue 加载静态资源报错
TechRoar的博客
09-20 324
在 Vue 开发中，我们经常需要加载静态资源，例如图片、样式表或 JavaScript 文件。本文将详细介绍一些可能导致 Vue 加载静态资源报错的常见问题，并提供相应的解决方案。在 Vue 开发中，加载静态资源报错可能是由于资源路径错误、缓存问题、跨域问题或文件类型不支持等原因引起的。通过仔细检查资源路径、处理缓存、进行跨域配置和确认文件类型是否受支持，我们可以解决这些问题并成功加载静态资源。确保加载的静态资源文件类型是受支持的，并在服务器端进行相应的 MIME 类型配置。如有其他疑问，请随时提问。
Vue脚手架创建项目时缺少静态文件？
ByteKnight的博客
10-02 544
请确认您的项目中是否存在这样的文件夹，并且其中是否包含您的静态文件。如果不存在，请手动创建一个合适的文件夹，并将您的静态文件放置其中。配置静态文件路径：Vue脚手架使用webpack来构建项目，因此您需要确保正确配置了webpack的静态文件路径。在项目根目录下，您可以找到一个名为"vue.config.js"的文件（如果不存在，请手动创建）。在使用Vue脚手架创建项目时，有时可能会遇到缺少静态文件的情况。引用静态文件：在Vue组件中引用静态文件时，请确保使用正确的路径。选项来指定静态文件的路径。
UEditor（包含静态资源无法访问的问题）
qq_43673190的博客
11-16 1366
1.网上下载包 2.配置网上有步骤 页面的js路径没有写错，但是引用一直显示404是因为/*拦截了所有资源，需要放开静态资源 在Struts.xml中添加线面代码可以开放静态资源：(需要将静态资源放在web下面的static文件夹中) <constant name="struts.action.excludePattern&am
关于Vue2项目打包部署到Nginx后加载不到静态文件和运行时报Unexpected token的问题
m0_61824545的博客
07-31 1256
报Unexpected token '
vue2怎么访问静态资源
01-10
### Vue2 中访问静态资源的方法及路径配置 #### 一、理解不同环境下的路径差异 在本地开发环境中，Vue CLI 提供了一个基于内存的虚拟文件系统来模拟真实的网络请求。然而，在生产环境下即打包部署到服务器后，所有资源会被构建工具（如 Webpack）处理并放置于特定目录下，此时默认情况下资源的访问路径是从服务器根目录开始[^1]。 #### 二、使用路径别名 `@/assets` 引入静态资源 对于位于 `src/assets` 文件夹内的静态资源，可以直接利用 Vue CLI 自带的路径别名 `@/assets` 来引用它们。这种方式不仅简化了代码编写过程中的路径管理，而且使得项目结构更加清晰易懂[^2]。 例如，在样式表中指定背景图像： ```css background: url('~@/assets/image/bg-index.jpg'); ``` 经过编译器转换后，上述 CSS 规则将会变成如下形式，其中哈希值用于缓存 busting: ```css background: url('/static/img/bg-index.e4bde37c.jpg') ``` #### 三、关于 `public` 文件夹内资源的特殊处理 如果某些资源不希望被 Webpack 处理，则应将其放入 `public` 文件夹中。这样做的好处是可以直接通过 `/` 开头的绝对路径进行访问而无需任何额外配置。需要注意的是，一旦选择了这种方法，就失去了诸如版本控制之类的优化特性[^4]。 #### 四、解决常见问题——防止图片加载失败 为了避免因路径设置不当而导致图片无法正常显示的情况发生，建议按照以下原则操作： - 使用相对路径或前述提到过的路径别名来进行引用； - 打包前确认 `.env.*` 环境变量已正确设置了公共基础 URL (`VUE_APP_BASE_API`) 和输出路径(`outputDir`)等参数[^3]；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值