vue-cli 项目中 assets 和 static 的区别

[FishPlusOrange]

使用 vue-cli 构建的项目有两个存放静态文件的目录，分别是 src/assets 和 static/。那么二者有什么区别呢？

首先，我们需要理解 Webpack 是如何处理静态资源的。在 *.vue 组件中，所有的 templates 和 css 都会被 vue-html-loader 和 css-loader 所解析以寻找资源路径。比如 <img src="./logo.png"> 和 background: url(./logo.png)，./logo.png 是一个相对资源路径，其被 Webpack 解析成模块依赖。

由于 logo.png 不是 JavaScript，当被视为模块依赖时，需要使用 url-loader 和 file-loader 对其进行处理。

这些资源在构建过程中可能被内联/复制/重命名，其基本上可以看成是源码的一部分，所以建议将 Webpack 处理的静态资源文件放在 src 目录下，和其它源文件放在一起。

static/ 下的文件都不会被 Webpack 处理，使用相同的文件名，直接拷贝到最终路径。我们必须使用绝对路径来引用这些文件，在 config/index.js 进行配置：

// config/index.js
module.exports = {
  // ...
  build: {
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/'
  }
  // ...
}

如上配置，我们需要使用绝对路径 /static/[filename] 来引用 static/ 目录下的文件。

简单总结就是：

• src/assets 里面的文件在构建的时候会被 Webpack 打包到最终输出文件，所以 src/assets 适合放本项目的资源文件。

• static/ 里面的文件在构建的时候不会被 Webpack 处理，直接拷贝到最终路径并引用，所以 static/ 适合放一些第三方类库文件。

参考：

• Handling Static Assets