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="">

最后可以微信扫码一起学习交流哦

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐