Vue从本地文件导入HTML答案

【问题标题】：Vue import HTML from local fileVue从本地文件导入HTML
【发布时间】：2020-07-24 21:50:15
【问题描述】：

我正在寻找一种从

中的文件导入 HTML 内容的方法

/src/activities/0/2/content.html

这两个数字是变量。

我需要做类似的事情

mounted(){
   this.foo = require('/src/activities/0/2/content.html')
}

<div>
{{ foo }}
</div>

但我没有找到方法来做到这一点。如果有人知道解决方案，那将非常有帮助。

谢谢

【问题讨论】：

标签： html vue.js webpack vuejs2 vue-cli

【解决方案1】：

首先 Vue 的 webpack 需要了解如何加载 .html 文件。您可以使用html-loader。先安装吧：

npm install html-loader

然后在项目根目录中编辑（或创建）vue.config.js（不是src）。来自the docs：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('html')
      .test(/\.html$/)
      .use('html-loader')
      .loader('html-loader')
  }
};

现在您可以导入 HTML 文件，例如：

import html from '@/activities/0/2/content.html'

export default {
  data() {
    return {
      html,   // es6 property shorthand syntax
      foo: null
    }
  }
}

并像任何其他数据变量一样使用html。或者您也可以按照require 的要求进行操作：

mounted(){
   this.foo = require('@/activities/0/2/content.html')
}

@ 是src 的别名

【讨论】：