vue如何引入其它静态文件

最新推荐文章于 2024-05-28 19:58:09 发布
最新推荐文章于 2024-05-28 19:58:09 发布
阅读量1.1k 收藏
点赞数
分类专栏： vue 引入模块或文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41619567/article/details/84882999
版权

vue如何引入其它静态文件

1.src目录下的资源只能import或require。

2.想静态引入的话，建立一个与src同级的目录例如static，然后把静态资源放入该文件夹下，html的引入路径如下：./static/...

注：试过一定要放在static文件夹下，否则报错

qq_41619567
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何配置vue.config.js 处理static文件夹下的静态文件
01-19
最近开发过程中遇到个小需求，需要根据需求动态配置一些静态数据，但我不想直接把这个静态文件引入进来，build时就会把数据打包到js文件中，造成js文件很大；呃呃。。。。（ps:就想给自己找点别扭） 回头看一下项目，果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据： fetch(../static/test.json) .then(res => res.json()) .then(res => { //获取到了数据 }) .catch(err=>{ //解析错误或者获取数据失败 }) ok，就这么简单，完活了运行起来看看效果
vue导入同级目录组件
公z号：职场爱学习
06-23 4544
vue导入同级目录组件 把 import authProtocol from “authProtocol” 改成 import authProtocol from “./authProtocol” vue常识 @/表示src目录 ./表示当前目录
web前端之vue动态访问静态资源、静态资源的动态访问、打包、public、import、URL、Vite
最新发布
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
05-28 1538
web前端之vue动态访问静态资源、静态资源的动态访问、打包、public、import、URL、Vite
Vue-cli引入图片的几种方式
細水、長流√的专栏
05-20 2699
情况1：图片在/public目录下 把图片放到与index.html同级的目录下 方式1 因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片 <!-- img标签引入图片：图片名称，这种属于相对路径，在index.html的同级目录下查找此图片 --> <img src="login-bg.png"> <!-- img标签引入图片：'/' + 图片名称，这种属于绝对路径
vue 如何引入静态js资源，例如jquery之类的
PrimaryColor
07-19 7569
步骤一、存放js文件。 静态js文件一般是存放在public目录下，为了结构明确，可以新建一个js文件夹，专门存放js文件，然后把需要引入的js文件放在该目录下，如图。 步骤二、引入js。 引入js文件必须在public下的index.html文件引入。示范： <script type="text/javascript" src="<%= BASE_URL %>js/jquery.3.2.1.min.js"></script> 其中“<%= BAS.
vue2.0/vue3.0 添加静态文件
lp-Strive的博客
08-26 6790
vue，静态文件static，静态文件public
vue引入静态js文件的方法
10-15
在Vue.js应用中引入静态JavaScript文件是常见的需求，特别是在处理一些全局配置或者第三方库时。以下将详细讲解如何在Vue项目中引入静态JS文件，包括针对不同Vue CLI版本的处理方式，以及避免常见错误的方法。 首先...
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在遇到Vue在`index.html`中引入静态文件不生效的问题时，首先要检查静态文件是否位于`static`目录下，如果不是，需要将其移入或调整配置。其次，确认静态资源目录是否与配置文件中的设置一致，如果不一致，应相应地...
vue组件内部引入外部js文件的方法
11-21
在Vue.js应用中，有时我们需要在特定的组件内部引入外部JavaScript文件，而不是全局引入。这样做的好处是可以避免不必要的资源加载，提高应用性能。本篇将详细介绍三种在Vue组件内部引入外部js文件的方法。 1. 操作...
vue引用public文件夹中文件
无心使然云中漫步
12-13 6386
可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。
Vue中引入静态资源的几种方式
一个女胖子的博客
04-26 1万+
最近修改一些老项目，好多组件里面引入图片的方式不太一样，总感觉自己没有好好总结过，今天有时间参考了几篇帖子，就总结一下； 在总结之前看了一下vue-cli的文档，突然感觉之前可能是我忽略它了基本没有看过，官方文档这块写的清清楚楚，还是应该多看文档，天天看掘金、简书这些碎片化知识也不太好； Vue中静态资源引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理： 在 JavaScript 被导入或在 template/CSS 中被引用。 这类引用会被 webpack 处理。诸
vue静态资源的引用(相对路径,绝对路径,@,~的一些笔记,以图片引入为例,含在线演示)
动感超人的博客
08-21 1万+
vue引入静态资源有相对路径和绝对路径的方式相对路径是URL开头有.绝对路径是URL开头为/或者省略不写相对路径相对的是当前文件绝对路径相对的是public目录并且引入的时候URL开头为~的使用在css里面引入静态资源的时候如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @。
Vue项目中的静态资源引入
sinat_29789933的博客
09-01 3339
项目中有时候需要引入静态资源，比如无需修改的js文件等，且无法npm获取，一般作为缓存的静态资源，会放在static文件夹下（放在其他文件夹下面会报错，直接报静态资源内部的错误，排查了一天。），在index.html中引入。assets在src文件夹下面，src里面的文件是参与打包的，所以一般项目中的资源会放在assets文件夹下，使用相对路径即可访问。VUE_APP_ASSETS是自己在.env文件中设置的，BASE_URL是项目自带的，我这里是Public。
vue引用js文件的多种方式
weixin_42582611的博客
02-23 1万+
(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。(4) 在main.js 引入就ok了 (测试这一步不用也可以)(2)在webpack.base.conf.js里加入。用到了es6的语法。
[vue]引入外部文件
前端
04-08 3774
[vue]引入外部文件 这里的vue中引入外部文件，不是指在src的vue文件中引入独立的项目中的js文件，而是指非该项目中的文件，或者非打包范围（src目录下）的其它文件，因为需要引用外部文件中的变量，因为该变量是变化的，不能在该项目中确定该值，该文件根据条件最终被放置到打包后的dist文件夹中，因此不是项目中指定目录下的文件 此处外部文件是指文件打包后，被后来放置到打包的dist文件夹中的js文件，该文件之前不存在于项目中，或者不在打包范围之内 例如：dist/env.js 直接引用文件 可以在in
vue-cli2项目引入静态文件，每次打包时添加时间戳，防止浏览器缓存
haogemr的博客
09-29 2886
vue-cli2项目引入静态文件，每次打包时添加时间戳，防止浏览器缓存
vue之js、css等静态文件的引入(vue路径篇)
热门推荐
CruellyJohn的博客
02-13 2万+
1、如何引入如js，css等文件？ 比如我们想引入jQuery文件或者依赖     若是已下载好的jQuery文件，则这样引入。 打开webpack.base.conf.js，在relove加入这段代码 // 在开头引入webpack，后面的plugins那里需要 var webpack = require('webpack') // resolve module.export...
vue 项目引用static目录资源_vue中 静态文件引用注意事项
weixin_39848953的博客
12-21 9882
(一)assets文件夹与static文件夹的区别区别一：assets文件是src下的，所以最后运行时需要进行打包，而static文件不需要打包就直接放在最终的文件中了区别二：assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用，在script下必须用@import的方式引入，而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式...
vue如何引入静态文件
cs840610862的博客
07-23 1703
在工作中, 因为一个同事把static文件夹直接放在根目录下面, 咋一看没啥问题, 但是根本解析不出来, 只能看到一串html文件, 看preview如下: We’re sorry but manager-demo doesn’t work properly without JavaScript enabled. Please enable it to continue. 正确的引入方式 在public文件夹下面新建一个static文件夹 一定要在public文件夹下面 在index.html文.
vue引入html静态文件
07-28
在Vue中引入HTML静态文件可以使用`v-html`指令。首先，确保你的HTML文件已经放置在Vue项目的静态资源目录中，通常是`public`文件夹。然后，在Vue组件中使用`v-html`指令来渲染HTML内容。 以下是一个示例： 1. 将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值