vue-cli中打包图片路径错误的解决方法

以下是详细讲解“vue-cli中打包图片路径错误的解决方法”的完整攻略。

问题背景

在使用vue-cli构建的项目中，有时候会出现打包后图片路径错误的情况。例如，图片本来应该位于public目录下的img子目录中，但在打包后，图片路径变成了根目录下的img子目录。这样就会导致页面无法正确显示图片。

解决方法

针对这种情况，我们可以采取以下两种方法解决。

方法一：使用相对路径

在页面中引用图片时，可以使用相对路径，保证在打包后，图片路径正确。例如：

<img src="../img/example.png" alt="example">

这里的../表示返回上一级目录，再进入img目录，可以正确找到图片。

方法二：使用publicPath参数

我们还可以通过配置webpack的publicPath参数，来设置打包后资源文件的路径。例如，在vue.config.js中增加以下配置：

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

这里的'./'表示打包后资源文件的路径为相对于index.html的当前路径。当然，也可以设置为绝对路径或其他需要的路径。

示例说明

下面讲解两个示例，说明如何使用这两种方法解决打包后图片路径错误的问题。

示例一：使用相对路径

假设我们有一个图片文件example.png，位于public/img/目录下，我们需要在页面中使用这张图片。

正常情况下，我们的代码应该是这样的：

<img src="/img/example.png" alt="example">

但这样会出现图片路径错误的问题。我们可以使用相对路径来解决这个问题。假设我们的页面文件同样位于public目录下，那么我们可以这样引用图片：

<img src="../img/example.png" alt="example">

这里的../表示返回上一级目录，再进入img目录，可以正确找到图片。

示例二：使用publicPath参数

我们可以在vue.config.js中增加以下配置：

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

这里的'./'表示打包后资源文件的路径为相对于index.html的当前路径。当然，也可以设置为绝对路径或其他需要的路径。这样，在页面中引用图片时，也需要注意路径的变化。例如，如果我们在public/img/目录下有一张图片example.png，可以这样引用：

<img src="<%= BASE_URL %>img/example.png" alt="example">

这里的<%= BASE_URL %>会被替换成webpack的publicPath参数，保证打包后图片路径正确。

总结

在vue-cli项目中，由于打包的机制不同，容易出现图片路径错误的问题。正确使用相对路径和publicPath参数，可以有效地解决这个问题。希望这篇攻略对你有所帮助。

阅读剩余 39%