Vue 进阶面试题, Vue 项目中 assets 和 static 的区别是什么?
Vue 进阶面试题, Vue 项目中 assets 和 static 的区别是什么?
QA
Step 1
Q:: Vue 项目中 assets 和 static 的区别是什么？
A:: 在 Vue 项目中，assets 和 static 都是用于存放静态资源的目录，但它们有不同的用途和处理方式。assets 目录下的资源会通过 webpack 进行处理和打包，路径会被编译成哈希值，这样可以实现缓存优化。而 static 目录下的文件不会经过 webpack 处理，文件名和路径保持不变，直接复制到最终的输出目录中。一般情况下，如果需要动态引用的资源（例如 CSS 中引用的图片），应该放在 assets 中，而那些无需编译且路径固定的资源（如 favicon、第三方库等）可以放在 static 中。
Step 2
Q:: 在 Vue 项目中，如何选择将文件放置于 assets 或 static 中？
A:: 选择将文件放置于 assets 还是 static 中，主要取决于文件是否需要经过 webpack 处理。一般来说，所有需要被 webpack 编译、优化和路径解析的文件应该放在 assets 中。对于不需要被处理的文件，比如第三方库的 JS 文件、图标或 favicon，放在 static 中更为合适，因为这些文件会直接复制到最终的输出目录中，并且路径保持不变。
Step 3
Q:: 在实际项目中，static 目录中的文件如何使用？
A:: 在实际项目中，static 目录中的文件可以通过根路径直接访问。例如，如果在 static 目录中有一个图片 'logo.png'，你可以在 HTML 或 CSS 中通过 '/logo.png' 直接引用。这种方式适用于不需要路径解析或处理的文件，如 favicon 图标或第三方库。
Step 4
Q:: assets 目录中的资源如何引用？
A:: 在 Vue 项目中，assets 目录下的资源通常通过相对路径或别名（如 @ 符号）来引用。这些资源会通过 webpack 进行处理，包括路径解析、哈希化、压缩等。因此，你可以在 Vue 组件中通过 @/assets/ 来引用相关文件，例如 <img :src="require('@/assets/logo.png')" />。