如何在TypeScript Vue项目中导入HTML为模板复用？解决编译报错

我之前也碰到过一模一样的问题，Vue CLI把Webpack的配置封装起来了，所以咱们不用找webpack.config.js，得用vue.config.js来扩展配置。下面是一步步的解决方法：

1. 安装必要的依赖 #

首先得装上处理HTML模板的loader，打开终端运行：

npm install vue-template-loader html-loader --save-dev

2. 创建/修改vue.config.js #

在项目根目录下创建vue.config.js（如果已经有了就直接修改），添加对.html文件的loader规则：

方式一：用configureWebpack配置 #

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: 'vue-template-loader',
          exclude: /index.html/ // 排除项目入口的index.html，避免冲突
        }
      ]
    }
  }
}

方式二：用chainWebpack配置（更符合Vue CLI的链式配置风格） #

module.exports = {
  chainWebpack: config => {
    // 新增处理外部HTML模板的规则
    config.module
      .rule('html-template')
      .test(/\.html$/)
      .exclude.add(/index.html/) // 排除入口文件
      .end()
      .use('vue-template-loader')
      .loader('vue-template-loader')
      .end()
  }
}

3. 确保外部HTML文件是合法的Vue模板 #

你的dynamic-render.html里只能写Vue模板内容，不能包含完整的HTML结构（比如<html>、<body>这些标签），示例如下：

<div class="dynamic-container">
  <h2>{{ pageTitle }}</h2>
  <p>{{ dynamicContent }}</p>
</div>

4. 检查组件中的代码 #

确保你的Dashboard.vue中装饰器的使用是正确的，示例代码：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import WithRender from './common/dynamic-render.html';

@WithRender
@Component({
  // 如果还有其他组件选项可以写在这里
})
export default class Dashboard extends Vue {
  pageTitle = '加载的外部模板';
  dynamicContent = '这是来自外部HTML文件的内容';
}
</script>

5. 重启开发服务器 #

配置修改后，一定要重启你的Vue开发服务器，新的Webpack配置才会生效。

这样处理之后，TypeScript编译器应该就能正确识别并编译你的外部HTML模板文件了。

内容的提问来源于stack exchange，提问作者Suhas Bhosale