Vue引入本地文件无效

最新推荐文章于 2024-04-09 09:00:00 发布
最新推荐文章于 2024-04-09 09:00:00 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： css vue html css3 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TL18382950497/article/details/108160991
版权
在Vue项目中，由于webpack打包设置，将静态资源放在非static文件夹会导致路径错误。解决方法包括：将资源放入static文件夹并在项目中正确引用，或者在引入时假设静态资源位于static。打包后，webpack会重新组织文件，需注意资源路径的变化。
摘要由CSDN通过智能技术生成

无效的原因是，在webpack打包的设置(/config/index.js)中，指定将静态资源打包到static文件夹下，从而导致路径错误。
在这里插入图片描述
解决方法：

  • 将静态资源放在static文件夹下再引入
    – 打包之前
    在这里插入图片描述
    – 打包之后
    在这里插入图片描述
  • 或者在引入时默认静态资源在static文件夹下
    我在根目录下建立了css文件夹用来装样式文件
    在这里插入图片描述
    但是在引入的时候，我认为他已经在static文件夹下了（因为运行时它会被安排在那里）
    在这里插入图片描述
    你看，它还在提示，找不到bootstrap.css，因
最低0.47元/天 解锁文章
tanleiDD
关注
专栏目录
关于three.js在vue项目中引入GLTF文件
Liiiiiiiie的博客
06-04 3910
点击前往，关于three的基础使用，这里只写关于GLTFLoader在vue的使用，其他类型的3D模型可使用其他loader，three.js中文文档 点击这里有免费的gltf文件下载 注意！！！！！！ 项目中如使用mock.js，引入gltf文件会失效，因为mock会拦截XhrHttpRequest并重写，导致加载不了 首先，引入GLTFLoader import * as THREE from "three"; import { GLTFLoader } from "three/exampl.
vue使用原生bootstrap-fileinput无效（未解决）
weixin_43939111的博客
04-25 668
起因：要求替换项目框架，原先jq要替换成vue。暂时和产品商议设计了新的上传插件样式，自定义编写了一个文件上传插件。这篇只记录一下踩到的坑，由于时间关系，此问题未解决。然后，在vue中引入这个插件却始终不行。
HTML 用 script 引用 vue 失败【Uncaught ReferenceError: Vue is not defined】
最新发布
m0_74132943的博客
04-09 474
使用 script 引用 vue 将 HTML 文件改成 vue 文件来用；
vue无法使用bootstrap下拉菜单等功能
lunarych的博客
08-18 1407
vue无法使用bootstrap下拉菜单等功能 项目场景： vue项目使用bootstrap框架无法使用下拉菜单等功能 问题描述： 跟着菜鸟教程学习了bootstrap，然后再vue项目中安装配置好bootstrap后发现，下拉菜单无法使用。配置教程网上都有，下载jQuery、bootstrap、popper，在main.js中配置好，其他功能基本正常，但是下拉菜单无法使用。 原因分析： 根据在网上搜索的内容，有说是因为jQuery引入必须在bootstrap之前，但是vue引入没有先后顺序，也说是boo
一文解决 Vue 引入外部的 js 文件时失效问题
热门推荐
南淮北安的博客
06-17 1万+
文章目录一、问题引入二、问题分析与解决 一、问题引入 这是 user.js 的内容： new Vue({ el: "#app", data: { message: "hello vue...." } }); 感觉没啥问题，但是就是显示不出来： 二、问题分析与解决 下面列下常见的错误： （1）注意路径的写法： （2）注意对于 use.js 的加载顺序应该放在 vuejs 和 axios 之后或者参考（4）引入参数defer 或者 async： （3）对于引入文
vue3+element plus+vite 引入本地静态资源图片require报错的原因和解决方案，以及如何在表格中展示图片
m0_52043522的博客
06-02 4548
在写vue 3+element plus+vite 项目的过程中，require引入展示图片出现了报错，记录了一下错误原因和解决方法。
解决vue 项目引入字体图标报错、不显示等问题
10-18
总结，解决Vue项目中字体图标报错和不显示的问题，关键在于检查字体文件的引入路径、样式文件的引用以及预处理器的兼容性。通过上述方法，大多数情况下都能顺利解决这些问题，让图标在项目中正常显示。在实际开发...
vue中当图片地址无效的时候,显示默认图片的方法
10-18
综合来看，以上方法不仅可以有效解决图片地址无效时显示默认图片的需求，而且适用于大部分Vue项目中图片资源管理的场景。通过这些操作，可以大大提高用户界面的友好度，增强用户体验。希望本文内容能够为读者在处理...
vue的图片资源引入不显示问题
Hello World
07-16 2717
解决vue中单页应用无法引入图片等常用静态资源的问题
vue在index.html中引入静态文件不生效问题及解决方法
11-28
本文针对的是Vue小白，不喜勿喷，谢谢 出现该问题的标志如下 控制台warning（Resource interpreted as Stylesheet but transferred with MIME type text/html） 出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static，这种的解决办法更改配置文件，把对应的几个配置文件内的static更改为你自己所创建的静态资源目录，由于网上大多教程所改的地方都不够完全，还是会出现该问题，
外部引入js文件后vue失效？
baiJuYi
08-04 1067
外部引入js文件后vue失效
Vue+Three 加载glb文件报错
pinkling的博客
11-04 4954
报错： 加载glb的代码： load3D() { const loader = new GLTFLoader() const dracoLoader = new DRACOLoader() dracoLoader.setDecoderPath('/draco/') dracoLoader.preload() loader.setDRACOLoader(dracoLoader) loader.load('/3D/city...
Vue import()无法根据变量加载组件
weixin_47030193的博客
12-13 533
我试过了 ()=>import(path)，require，import(""+`${path}`)这些对我都没用，还是无法加载。页面上我使用<component :is="current"></component>想要实现动态切换组件。组件所在路径是数据库表里定义的，所以我需要根据变量来动态加载。但是import()只能写死路径，不能用变量。最后我改成下面这样就可以正常导入了。
vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
weixin_30568715的博客
03-31 160
0.修改webpack.base.conf.js 1 var webpack = require ("webpack") //add 2 3 //... 4 5 module.exports = { 6 resolve: { 7 extensions: ['.js', '.vue', '.json'], 8 alias: { ...
2021-09-28 vue项目引入第三方js文件失败的解决方法
bbt953的博客
09-28 2577
es5引入js文件的用法是script es6不能在用script了，如果vue项目中用script引入js文件是不生效的 此处，我引入的是echarts的中国地图数据文件 `//chinaJson.js var chinaJson = { //此处是中国地图的json数据，可在 以下链接找到中国国内所有省市区的json数据http://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580188&lng=106.722786
关于vue中的加载静态资源文件的方式
8月13日
05-06 2308
在vue中加载静态资源的方式，常用的方式： 1.<img :src="./static/images/logo.png" 2.动态加载组件 导入：import banner from '@/assets/imges/banner.png' 定义：在 data 中定义：banner 使用：<img :src="banner" /> 3.循环加载图片 export default { data() { return { banner, imglist: [
vue中更换字体，本地存储字体非引用在线字体库
boy火巨的博客
07-11 5210
1，首先把下载的字体 两种格式放到本地 2，新建文件夹 3，在这个文件里写 4，这main.js 里引用 5，在style里引用字体，结束！
关于直接引用vue.js没反应的问题（Vue.js）
Mr_John
03-10 7979
如下：
vue audio src引入本地文件
06-07
要引入本地文件作为Vue的audio元素的src，你需要将文件路径设置为相对于你的Vue组件的路径。假设你的音频文件在Vue组件的同级目录下，可以像这样设置audio元素的src属性： ``` <template> <div> <audio controls> <source :src="audioSrc" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> </template> <script> export default { data() { return { audioSrc: "./audio-file.mp3" } } } </script> ``` 在这个示例中，我们将音频文件名设置为“audio-file.mp3”，并将audioSrc属性设置为“./audio-file.mp3”，这将告诉Vue在同级目录下查找该文件。请注意，在这个示例中，我们将audio元素的type设置为“audio/mpeg”，这是MP3音频文件的MIME类型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tanleiDD

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值