vuecli4中如何配置打包使用相对路径

首先，在 vuecli4 中使用相对路径来打包，需要在 vue.config.js 配置文件中进行相应的设置。可以按如下步骤进行设置：

步骤1：在项目根目录中创建 vue.config.js 文件。

module.exports = {
 // 其他配置
}

步骤2：在 exports 内添加 baseUrl 属性，并将其设置为相对路径。

module.exports = {
  baseUrl: './'
  // 其他配置
}

步骤3：在项目中使用相对路径引用静态资源，例如在 .vue 文件中：

<img src="./assets/logo.png" alt="logo">

以上是基本配置，如果您的项目中有特殊情况，请根据实际情况进行相应的配置。

下面给出两个示例：

示例1：设置了 publicPath 的场景

如果您的项目已经设置了 publicPath，需要在 vue.config.js 配置文件中将 baseUrl 属性的值修改为 publicPath：

module.exports = {
  publicPath: '/',
  baseUrl: './'
  // 其他配置
}

示例2：多页面应用的场景

如果您是在一个多页面应用中使用 vuecli4，需要在输出的 html 文件中添加一个 base 元素。可以在vue.config.js 中修改配置，如下所示：

module.exports = {
  publicPath: '/',
  configureWebpack: {
    plugins: [
      new HtmlWebpackInjectAttributesPlugin({
        headTags: [
          {
            tagName: 'base',
            attributes: {
              href: './'
            }
          }
        ]
      })
    ]
  }
}

上述配置中，我们在 configureWebpack 中添加了一个插件，即 HtmlWebpackInjectAttributesPlugin，用于给生成的 html 文件添加一个 base 元素。

综上所述，以上为在 vuecli4 中配置打包使用相对路径的详细攻略。