vue cli 4 html-loader 如何配置

在项目中安装 html-loader

npm install html-loader --save-dev

在 vue.config.js 中添加 loader 配置

module.exports = {
  chainWebpack: config => {
    // 添加 html-loader 配置
    config.module
      .rule('html')
      .test(/\.html$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
  }
}

在组件中导入 html 文件

<template>
  <div>
    <!-- 导入 html 文件 -->
    <div v-html="htmlContent"></div>
  </div>
</template>

<script>
import htmlContent from './path/to/file.html'

export default {
  data() {
    return {
      htmlContent: htmlContent
    }
  }
}
</script>

注意事项：

如果在 html 文件中引用了 css 或 js 文件，需要使用 webpack 的 url-loader 或 file-loader 进行处理；
如果在 html 文件中使用了 vue 模板语法，需要使用 vue-template-loader 进行处理。