vue-cl 有一些静态资源不想经过webpack打包那么应该public 下面
vue-cl3脚手架生成的项目,静态资源要是不想经过webpack打包,那么应该放置在public 文件夹下面,而不是以前的static文件夹下面。先说说vue-cl3
静态资源可以通过两种方式进行处理:
在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。
从相对路径导入
当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中。在其编译过程中,所有诸如 img的…src 、background: url(…) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。
例如,url(./image.png) 会被翻译为 require(’./image.png’),而:
将会被编译到:
public 文件夹
任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。你需要通过绝对路径来引用它们。
注意我们推荐将资源作为你的模块依赖图的一部分导入,这样它们会通过 webpack 的处理并获得如下好处,所以最好大部分资源还是经过webpack打包比较好哦:
脚本和样式表会被压缩且打包在一起,从而避免额外的网络请求。
文件丢失会直接在编译时报错,而不是到了用户端才产生 404 错误。
最终生成的文件名包含了内容哈希,因此你不必担心浏览器会缓存它们的老版本。
public 目录提供的是一个应急手段,当你通过绝对路径引用它时,留意应用将会部署到哪里。如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀。
换个场景说,也就是比如你想把tx.jpg 图片不经过webpack打包,那么应该
放在该目录下,然后在需要向你的组件传入基础 URL,
data () {return {publicPath: process.env.BASE_URL}
}
最后html页面是:
<img :src="`${publicPath}tx.jpg`" alt="">
最后可以微信扫码一起学习交流哦
vue-cl 有一些静态资源不想经过webpack打包那么应该public 下面相关推荐
- Vue项目中的静态资源引入
Vue项目中的静态资源引入 assets和static assets 静态资源访问static assets和static assets assets在src文件夹下面,src里面的文件是参与打包的, ...
- webpack打包vue反编译_2020年你必须知道的webpack打包优化方法
本文字数:3534字 预计阅读时间:10分钟 随着我们的项目项目越做越大,引入的第三方库会越来越多,打包的依赖也越来越多,每次 build 的时间越来越长,打包出来的文件会越来越大.最糟糕的是单页面应 ...
- vue如何将图片压缩成webp格式并用webpack打包
一.vue-cli将图片转化成webp格式 1.安装vue-webp-plugin npm install --save vue-webp-plugin 2.配置webp-plugin(在main.j ...
- vue动态加载静态资源
项目背景:项目的使用场景是面向信息安全相关部门,环境很有可能没有公网,局域网并不稳定,所以无法使用七牛等CDN保存图片资源.从而采用引入本地资源的方式 通常一张本地静态图片在vue中的写法是这样 &l ...
- Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题
问题描述:使用vue-cli脚手架工具生成的vue项目,使用npm run build后生成的文件直接双击打开白屏一片. 解决方案: 第一步:修改build文件夹下utils.js,在以下位置加入 i ...
- [vue] 怎么解决vue打包后静态资源图片失效的问题?
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
- Springboot的web开发-静态资源
1.web开发简介 SpringMVC自动配置概览 Spring Boot provides auto-configuration for Spring MVC that works well wit ...
- SpringBoot指南(三)——静态资源、欢迎页、Favicon、默认页面
文章目录 1 静态资源 2 欢迎页 3 自定义Favicon 4 默认页面跳转 1 静态资源 放在类路径下的/static./public./resources./META-INF/resources ...
- html资源文件放在哪里,09 Spring Boot开发web项目之静态资源放哪里?
Spring Boot开发web项目之静态资源放哪里? 先了解自动装配autoconfiguration 这些内容是spring boot天然集成好的框架 找到WebMvcAutoConfigrati ...
最新文章
- 学习笔记---取得枚举项的2种方法: Enum.GetValues()-Array.GetValue()和Enum.GetNames()-Enum.Parse()...
- 转载:Objective-C中的 instancetype 和 id 关键字
- Swift3.0语言教程获取字符串长度
- Python开发【Part 4】:数据类型操作
- 20200428总结
- Android Studio之提示Gradle sync failed: Plugin with id ‘com.novoda.bintray-release‘ not found.
- html5做在线音乐,html5实现在线响应式音乐播放器
- TensorFlow实现去噪自编码器(Denoising Autoencoder)
- 一位BAT大牛推荐的程序员必装10款神器软件
- matlab支持向量机预测电机故障,关于支持向量机(SVM)的一个简单应用实例及matlab代码...
- win10右键卡顿原因_如何解决Win10桌面右键一直卡顿转圈的问题?
- 大厂标配的动态化解决方案,高阶技术从未如此简单
- 2021莆田六中一高考成绩查询入口,2021,我们来了 ——莆田六中2021届《青春•励志•圆梦》高三高考动员誓师大会...
- C#轻松创建ModbusTCP服务器【Slave】,实现工业数据交换接口。
- vcs的加密protect
- 抢先报名 | gTech 职业大揭秘,17 日 19:30 等你来
- reac antd 删除列表
- 大数据智能平台的构建策略与步骤
- Python工资一般多少?
- Apache Mina