vue-cli脚手架项目中public和src/assets的区别_public里的文件和src下的assets文件的区别

public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

• 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
• 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
• 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：

• 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过
  <%= BASE_URL %> 设置链接前缀：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
1

• 在模板中，你首先需要向你的组件传入基础 URL：

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}
1
2
3
4
5

然后：

<img :src="`${publicPath}my-image.png`">
1

何时使用 public 文件夹

• 你需要在构建输出中指定一个文件的名字。
• 你有上千个图片，需要动态引用它们的路径。
• 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的

vue-cli3.0有两个放置静态资源的目录分别是public和assets。

public放不会变动的文件（相当于vue-cli2.x中的static）
public/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这个取决于你vue.config.js中publicPath的配置，默认的是/。
assets放可能会变动的文件
assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。

简单来说就是就是public放别人家js文件（也就是不会变动），assets放自己写的js文件（需要改动的文件）