vue项目之webpack打包静态资源路径不准确的问题

下面详细讲解 "vue项目之 webpack打包静态资源路径不准确的问题" 的攻略流程，如下：

问题描述

在使用 webpack 打包 vue 项目时，如果项目中使用了静态资源（如图片、字体等），在打包后访问页面时可能会出现静态资源路径不正确的问题。

解决方案

方案一：配置 publicPath 参数

webpack 提供了配置 publicPath 参数的方式来解决静态资源路径不正确的问题。具体配置方法如下：

// webpack.config.js

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

上面的配置可以将静态资源的路径指向根目录。如果静态资源路径的前缀是 /images，那么打包后的路径将为 /images/filename。如果前缀为 /static/images，那么打包后的路径将为 static/images/filename。

方案二：使用 file-loader 或 url-loader

如果以上方法不能解决你的问题，你可以尝试使用 file-loader 或 url-loader，这两个 loader 可以将静态资源文件复制到打包后的目标目录下。

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'img/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'media/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'fonts/[name].[hash:7].[ext]'
            }
          }
        ]
      }
    ]
  }
}

使用 file-loader 或 url-loader 后，我们可以在 webpack 打包结束后，在输出目录下找到对应的静态资源文件。

两个示例：

示例一：

静态资源路径前缀为 ./static，打包后的路径为 /static/images/logo.png。

<template>
  <div>
    <img src="./static/images/logo.png" alt="logo">
  </div>
</template>

在 webpack.config.js 文件中配置：

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

示例二：

静态资源路径为绝对路径 /static/images，打包后的路径为 /static/images/logo.png。

<template>
  <div>
    <img src="/static/images/logo.png" alt="logo">
  </div>
</template>

在 webpack.config.js 文件中配置：

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