Vue从本地文件导入HTML

Question

我正在寻找一种从文件中导入 HTML 内容的方法，该文件位于

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

这两个数字是变量。

我需要做类似的事情

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

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

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

谢谢

Answer 1

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

npm install html-loader --save-dev

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

npm install html-loader --save-dev

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

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

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

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

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

@是一个别名src