Question

我正在寻找一种从

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

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

这两个数字是变量。

我需要做

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

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

但是我找不到解决方法。如果有人知道解决方案，那将非常有帮助。

谢谢

Answer 1

First 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

的别名

Vue从本地文件导入HTML

1 个答案: