前Vue新手必学：引入图片的正确姿势

使用 Require 时，图片引入的困惑：Require Public vs Require /static

作为 Vue 开发的新手，你是否曾因图片引入的问题而困扰不已？别担心，你不是唯一遇到这种情况的人。在本文中，我们将深入探究为什么使用 require public 底下的文件不会走 require /static 这种写法，以及如何在生产环境中正确引入图片。

开发环境 vs 生产环境：截然不同的风景

在开发环境中，require public 底下的文件可以正常引入图片，因为 webpack 的 resolve.alias 配置项允许你使用别名来简化导入文件的路径。但是，到了生产环境，一切都会发生改变。

在生产环境中，webpack 会对代码进行打包，并将所有静态资源文件移动到一个单独的目录中。因此，require public 底下的文件就会失效，图片无法正常加载。

require public vs require /static：正确姿势

为了避免这个问题，你应该在生产环境中使用 require /static 来引入图片文件。这种写法会将图片文件直接复制到项目的输出目录中，确保图片在生产环境中也能正常访问。

import logo from '/static/logo.png'

Webpack、Rollup、Vite：不同的配置方式

在 Webpack 4 中，可以通过配置 output.publicPath 来指定静态资源文件的输出路径：

output: {
  publicPath: '/static/'
}

在 Vue CLI 中，只需要在 vue.config.js 文件中配置 publicPath 即可：

module.exports = {
  publicPath: '/static/'
}

在 Rollup 和 Vite 中，可以通过配置 output.dir 来指定静态资源文件的输出路径：

output: {
  dir: 'static'
}

总结：一劳永逸解决问题

通过了解 require public 和 require /static 之间的差异，你可以避免在开发过程中遇到图片引入的问题。在生产环境中，始终使用 require /static 来引入图片文件，以确保图片能够正常加载。

常见问题解答

1. 我应该在开发环境和生产环境中都使用 require /static 吗？

不，在开发环境中使用 require public 就可以了。在生产环境中，使用 require /static 才能确保图片正常加载。

2. 除了图片文件，还能用 require /static 引入其他文件吗？

是的，require /static 可以引入任何类型的静态文件，如 CSS 文件、字体文件等。

3. 我在生产环境中使用 require public，但图片仍然无法加载，为什么？

检查你的 webpack 配置，确保 output.publicPath 设置正确。如果仍然无法加载，请尝试手动将图片文件复制到项目的输出目录中。

4. 使用 require /static 会影响图片的性能吗？

不会，require /static 只是将图片文件复制到输出目录中，不会影响图片的性能。

5. 在 Vue CLI 中，除了 vue.config.js，还有其他方法可以配置 publicPath 吗？

是的，你可以在项目的 package.json 文件中配置 publicPath：

"publicPath": "/static/"