vue如何引入静态文件

最新推荐文章于 2024-10-16 10:07:25 发布
原创 最新推荐文章于 2024-10-16 10:07:25 发布 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文指导如何避免静态文件夹解析困扰：需将static文件夹置于public下，并遵循Vue.config.js中publicPath设置。介绍正确的文件组织和引用方法，确保JavaScript启用后的正常工作。

在工作中, 因为一个同事把static文件夹直接放在根目录下面, 咋一看没啥问题, 但是根本解析不出来, 只能看到一串html文件, 看preview如下:

We’re sorry but manager-demo doesn’t work properly without JavaScript enabled. Please enable it to continue.
正确的引入方式
  1. 在public文件夹下面新建一个static文件夹
    • 一定要在public文件夹下面
  2. 在index.html文件中引入
  3. 在vue.config.js文件中: publicPath: ‘/’
vue 引入静态文件默认图片地址
King Saj
01-05 814
<van-image class="user-avatar" round :src="avatarDefault" /> data () { return { avatarDefault: require('@/assets/image/avatar-default.png'), // 默认头像 }; }, 关于静态资源放在 assets 还是 ...
vue 配置static文件夹下的静态文件
REal_201903的博客
09-01 1627
vue静态文件配置
public文件夹与static文件夹的区别
qq_32458791的博客
06-17 898
2assets中的文件在vue中的template/style下用…/这种相对路径的形式进行引用，在script下必须用@import的方式引入，而public下的文件在.vue中的任何地方只需使用…/这种相对路径的方式引入，1assets文件是src下的，所以最后运行时需要进行打包，而public文件不需要打包就直接放在最终的文件中了。3此外，放到 public 里的东西，可以不用写开头目录，脚手架打包的时候找不到，会去public文件夹找的。
解决Vue 没有static目录无法动态加载图片的404问题
finalheart的博客
05-10 1万+
最近在写毕设，接触到的Vue。 发现vue -V 2.9.6 版本的项目目录下面没有所谓的build 目录也没有static目录。下面是我的项目目录结构。 1.首先说一下，我没有改配置。这个目录结构有main.js webpack.config.js这两个主要的配置文件。在解决这个问题时我没有做任何修改。 2.我想实现的是数据库里面存的图片路径，然后在img标签中src属性直接...
Vue中使用a标签下载静态资源文件（比如excel、pdf等），纯前端操作
最新发布
nbclasszj的博客
10-16 2075
public文件夹下新建static文件夹存放静态资源,使用a标签来模拟下载
vue2.0/vue3.0 添加静态文件
lp-Strive的博客
08-26 7387
vue，静态文件static，静态文件public
vue引入静态js文件的方法
10-15
在Vue.js应用中引入静态JavaScript文件是常见的需求，特别是在处理一些全局配置或者第三方库时。以下将详细讲解如何在Vue项目中引入静态JS文件，包括针对不同Vue CLI版本的处理方式，以及避免常见错误的方法。 首先...
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在遇到Vue在`index.html`中引入静态文件不生效的问题时，首先要检查静态文件是否位于`static`目录下，如果不是，需要将其移入或调整配置。其次，确认静态资源目录是否与配置文件中的设置一致，如果不一致，应相应地...
Vue中引入静态资源的几种方式
一个女胖子的博客
04-26 1万+
最近修改一些老项目，好多组件里面引入图片的方式不太一样，总感觉自己没有好好总结过，今天有时间参考了几篇帖子，就总结一下； 在总结之前看了一下vue-cli的文档，突然感觉之前可能是我忽略它了基本没有看过，官方文档这块写的清清楚楚，还是应该多看文档，天天看掘金、简书这些碎片化知识也不太好； Vue中静态资源引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理： 在 JavaScript 被导入或在 template/CSS 中被引用。 这类引用会被 webpack 处理。诸
Vue项目中的静态资源引入
sinat_29789933的博客
09-01 3637
项目中有时候需要引入静态资源，比如无需修改的js文件等，且无法npm获取，一般作为缓存的静态资源，会放在static文件夹下（放在其他文件夹下面会报错，直接报静态资源内部的错误，排查了一天。），在index.html中引入。assets在src文件夹下面，src里面的文件是参与打包的，所以一般项目中的资源会放在assets文件夹下，使用相对路径即可访问。VUE_APP_ASSETS是自己在.env文件中设置的，BASE_URL是项目自带的，我这里是Public。
【TP5.0】引入public/static目录下的静态资源
weixin_34075551的博客
03-24 4099
1、假设tp5 下只有一个项目，且application在tp5下， 2、我们知道 外界访问tp5项目，只能通过public/index.php的入口文件，且查看apache服务器我们知道， 【DOCUMENT_ROOT]指向的是D:\\phpStudy/WWW/tp5/public 目录，所以我们apache服务器【/】根目录其实是tp5/public/目录 3、知道了上面的知识，那么引入就变得...
webpack4中hash、chunkhash和contenthash三者的区别
bubbling_coding的博客
08-10 1万+
在webpack中有时需要使用hash来做静态资源实现增量更新方案之一，文件名的hash值可以有三种hash生成方式，每一种都有不同应用场景，那么三者有何区别呢？ hash、chunkhash、contenthash hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容发生改变的话，那么对应文件hash值也会改变，对应的HTML引用...
vue 项目引用static目录资源_VUE创建项目create vue XXX 默认目录及其作用的详细介绍...
weixin_36096321的博客
01-03 1118
默认生成出来就是这个结构。下面加粗的部分是另外需要的介绍一下目录及其作用：node_modules：npm 加载的项目所需要的各种依赖模块。src：这里是我们开发的主要目录(源码)，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：assets:放置一些图片，如logo等components:目录里放的是一个个的组件文件router/index.js：配置路由的地方App.vue：项目入...
vue中index.html引用静态js
qq_41947500的博客
12-16 1万+
vue中index.html引用静态js 修改环境：vue-cli 2.x index.html位置 默认在根目录下 也可通过以下方法修改 修改对应环境的template路径（初始为index.html） 修改为从根目录起，想要使用的index.html位置。 js的引用路径 从html相关联的js路径并不是相对路径，而是配置文件转换后的路径。 若如下配置，是找不到文件的 当他找不到文件时，会报出 Uncaught SyntaxError: Unexpected t...
vue——静态配置文件不进行编译的处理方法(在public中引入js)
yehaocheng520的博客
07-22 4069
前几天同事提了一个要求，他想在vue引入静态配置文件，但是此文件不要进行编译。静态配置文件中的参数还需要在其他的.vue文件中使用配置文件中的参数。 我一开始的想法就是：要在src同级目录下，添加几个.env.xxx的配置文件，然后在文件中配置NODE_ENV``NODE_BASE_URL等参数，然后在其他页面就可以通过env.process.xxx的方式来使用了。 但是同时要求不能进行编译，虽然我也不太清楚，编译和不编译对参数有什么影响。 最终方案如下： 1.在public文件中添加同级的static文件
vue——项目中加载public中的静态资源——技能提升
yehaocheng520的博客
04-13 3532
vue——项目中加载public中的静态资源——技能提升
六、静态文件引用
Sean_0819的博客
01-18 410
django项目开发过程中，通过提供静态文件服务，所以确保它在配置中。
vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题
热门推荐
一键写代码的博客
07-23 2万+
几种设置publicPath后，再对比打包后的index.html文件 测试背景： 每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录 部署的时候，前端打包的文件部署在服务器的一个静态资源目录下 我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内，都需要前端正确设置publicPath才能正确访问的。 打包后的文件目录： ├─dist ├─css ├─img └─js index.html 一、不设置publicPath时，既设置为''，部署后请求
vue2.6.11引入静态文件的js和图片
summer鸿的博客
12-04 884
vue3.0中index.html引入静态文件。 1.<scripttype="text/javascript"src="<%=BASE_URL%>static/js/createjs-2015.11.26.min.js"></script> 2. 在public下新建static，然后建js等相应文件夹
vue引入html静态文件
07-28
在Vue中引入HTML静态文件可以使用`v-html`指令。首先，确保你的HTML文件已经放置在Vue项目的静态资源目录中，通常是`public`文件夹。然后，在Vue组件中使用`v-html`指令来渲染HTML内容。 以下是一个示例： 1. 将HTML文件放置在`public`文件夹中，例如`public/sample.html`。 2. 在Vue组件中引入并渲染HTML文件。 ```html <template> <div> <div v-html="htmlContent"></div> </div> </template> <script> export default { data() { return { htmlContent: '' }; }, mounted() { this.fetchHtmlFile(); }, methods: { fetchHtmlFile() { fetch('sample.html') .then(response => response.text()) .then(data => { this.htmlContent = data; }) .catch(error => { console.error(error); }); } } }; </script> ``` 在上述示例中，我们通过使用`fetch` API 获取HTML文件的内容，并将其赋值给`htmlContent`变量。然后，使用`v-html`指令将HTML内容渲染到页面上。 请记得替换示例中的文件路径和组件名称以适应你的项目。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值