vue组件中引入public文件，build打包后找不到资源报错404

最新推荐文章于 2024-03-12 10:31:50 发布

失眠的咕噜

最新推荐文章于 2024-03-12 10:31:50 发布

阅读量6.1k

点赞数 5

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_44104341/article/details/108621821

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在组件中我使用object标签预览pdf文件

<object width="100%" height="100%" data="/help/help.pdf" type="application/pdf" id='help-object'>
 </object>

该help.pdf文件我是放在了public文件夹下（public/help/help.pdf），为了不被webpack编译（位置如图）

很开心没问题，但是build打包之后给后端，就出现问题了，该文件路径报错404，资源找不到，看到Network中路径不对。

找了半天，修改了配置都不行，后来发现把引入的文件路径前的 / 去掉就可以了，开心打包给后台...

<object width="100%" height="100%" data="help/help.pdf" type="application/pdf" id='help-object'>
        </object>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

失眠的咕噜

关注关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue打包后css路径_Vue打包后访问静态资源路径问题

weixin_30475939的博客

01-13

2532

Vue打包后访问静态资源路径问题Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现图片路径出错啦！！！解决方法：1.先找到config下的index.js文件把最后的'/' 改为 ...

vue-cli 打包出来的文件缺少_Vue cli构建及项目打包以及出现的问题（update 2020-05）...

weixin_39675215的博客

12-22

822

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

vue 自建的css文件打包后找不到

wangooo的博客

09-21

1089

vue中使用固定的css文件

vue3项目public下的视频资源打包上传至服务器后找不到文件位置

最新发布

qq_57692002的博客

03-12

1208

视频文件本地播放正常，打包至服务器控制台404，找不到该文件，删除原本路径前的 "/" 重新上传后成功播放。文件位置：public>video>somVideos>video.m3u8。

记录报错：vue项目从public文件下取资源，cordova打包的apk报错文件找不到的问题

An滴饭儿的博客

11-18

1129

vue项目从public文件下取资源，cordova打包的apk报错文件找不到的问题

Vue3项目打包后资源找不到

LueLueLue77的博客

06-10

6984

vue项目打包后放到服务器上资源找不到，解决办法

vue 打包后找不到资源文件

一个有思想的新时代农民工的博客

05-13

3493

前一段时间我们写了一个项目，在本地是好的，但是布到线上发现有些字体图标找不到，然后就各种找问题，最后确认是资源文件路径没引用正确导致的，怎么解决呢： 1、在build的utils文件中配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', // 此处添加 fallback: 'vue-style-loader'

vue-cli5升级：打包后运行时缺少对应的public文件夹下css、js等静态文件

qq_44242707的博客

10-28

1880

【代码】vue-cli5升级：打包后运行时缺少对应的public文件夹下css、js等静态文件。修改copy-plugin配置

Vue-Cli4+Vue3 创建、发布封装UI组件库打包并发布到 npm 项目安装及使用

qq_41279792的博客

03-20

667

packages/advancedform/index.js：文章目录 packages/advancedform/index.js：文章目录 1、创建项目 1.1 调整目录我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。 2.创建测试组件 advancedform.vue: packages/advancedform/index.js： package/index.js： 3、配置项目以支持新的目录结构 4、根目录新增vue.config.js .

解决vue项目 build之后资源文件找不到的问题

10-14

主要介绍了解决vue项目 build之后资源文件找不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如何把本地的vue项目写的组件上传到npm

weixin_44875212的博客

03-09

1461

平常使用Vue开发时，一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件，但是如果项目不同我们也需要这个组件，那就需要复制一份公共组件代码到新项目，一个还好，如果是多个组件，这样就稍显麻烦了。所以我们可以将封装好的组件打包发布至npm，就可以像element ui ant-design-vue这些ui组件库一样通过npm命令下载使用了。

vue工程化之（组件导出与组件导入、插件的引入【swiper,jQuery,animate,bootstrap】、项目打包压缩）

_HaoJie的博客

07-04

1720

（1）组件导出与组件导入 1.组件导出可以用export default 组件导出export default单次限制：在组件模块中，只能使用export default向外暴露一次 2.组件导入区别： ①执行时机：require 是运行时才执行， import 是编译时执行； ②导入位置：require可以理解为一个全局方法，所以它可以在任何地方导入组件模块，而import必须写在文件的顶...

vue-cli3.0 图片放在public，vue打包部署非根目录时，图片引入错误

Stavin Li的博客

11-07

4252

解决办法：方法1. 修改nginx 配置，以部署目录espace为例 upstream a.xx.com{ server 127.0.0.1:8081; } server { listen 80; server_name a.xx.com; location /{ proxy_pass http://a.xx.com; } l...

【vue】打包后，访问public文件的index.html，访问不到js和css，需要配置publicPath:“ “

weixin_43444977的博客

10-11

4406

在vue.config.js文件添加配置项publicPath，publicPath路径修改" "，dist文件下index.html即可找到。vue.config.js文件中publicPath路径为“/”，表示根目录下，是访问不到js和css文件的，vue项目打包后， index.html直接访问不到 css 文件和 js 文件；

Vue之打包项目生产环境中请求接口报错404

热门推荐

qq_39835505的博客

11-15

1万+

打包流程 https://blog.csdn.net/qq_36538012/article/details/107356270 404 解决 https://blog.csdn.net/qq_34535116/article/details/120155149 问题 1 部署项目之后，浏览器空白页，报错如下：解决正常vue项目是要修改 config文件夹下的index.js 可是vue-element-admin项目没有这个文件那就找到并且打开vue.config.js 将 publicPath

vue build打包后css里的图片路径404不正确的问题

Calamus

06-21

3281

 vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块，添加 publicPath:’../../’  if (options.extract) { return ExtractTextPlugin.extract({ use...

vue打包之后更改配置的json文件无效

相濡以沫不如相忘于江湖.

08-16

3259

在project.config.json里面更改配置后不生效，具体原因还没有找到。然后把这个js文件引入到public/index.html下。在项目中就可以直接使用window.api进行使用。把json文件换成js文件。这是目前我找到的办法…...

springboot打包成jar运行无法访问resources下的资源，以及jar包运行时引用的第三方jar包也无法加载

weixin_43165220的博客

02-05

2885

最近碰到个问题，就是项目打包成jar包运行无法访问resources里的资源。jar包运行时引用的第三方jar包也无法加载。就是我需要实现一个导出成pdf或者word文档的功能，导出这两种文档是根据模板来导出。先准备好了pdf和word的模板，导出时将数据内容填充到模板中，然后再将填写好内容的pdf或word文档下载下来。这两种模板我是放在 resources 目录下 template 文件夹里读取模板时，我是用 ClassLoader.getSystemResource(“template”).g

vue引入组件报错找不到

09-23

当在Vue中引入组件时，如果出现找不到组件的错误，通常是由于以下几个原因导致的： 1. 组件路径错误：首先要确保引入组件的路径是正确的。需要检查组件的相对路径是否正确，例如是否使用正确的相对路径或绝对路径。 2. 组件命名错误：要引入的组件可能存在命名错误。需仔细检查组件的命名是否正确，包括大小写和拼写。 3. 组件文件不存在：如果引入的组件文件不存在，就会出现找不到组件的错误。需要检查组件文件是否存在，以及文件名是否正确。 4. 组件未导出：Vue组件需要在文件中使用export default导出。如果组件文件没有正确导出组件，就会出现找不到组件的错误。需要检查组件是否有正确导出。 5. 组件未全局注册：如果没有将组件全局注册，就会出现找不到组件的错误。在使用组件之前，需要使用Vue.component或Vue.use全局注册组件。如果是通过子组件引入，需要确保父组件在引入子组件之前已经注册了。如果上述问题都没有导致错误，可以尝试删除缓存并重新安装依赖。可以运行npm cache clean命令清除缓存，然后运行npm install重新安装依赖。总之，引入组件找不到的错误可能由于文件路径错误、命名错误、文件不存在、组件未导出或未全局注册等原因导致。需要逐一检查这些可能的问题，并且根据情况采取相应的纠正措施。