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

然后在項目根目錄（不是src ）中編輯（或創建） vue.config.js 。 從文檔：

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的別名

Answer 2

<div  v-html="require('/src/activities/0/2/content.html')"></div>