Vue импорт HTML из локального файла - PullRequest
Новая
       72

Vue импорт HTML из локального файла

1 голос
/ 12 апреля 2020

Я ищу способ импорта HTML содержимого из файла, который находится в 

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

Два числа являются переменными.

Мне нужно сделать что-то вроде 

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

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

Но я не нахожу способ сделать это. Если кто-то знает решение, оно будет очень полезно.

Спасибо

1 Ответ

1 голос
/ 12 апреля 2020

Первый веб-пакет Vue должен понимать, как загружать .html файлы. Вы можете использовать html-loader. Сначала установите его: 

npm install html-loader

Затем отредактируйте (или создайте) vue.config.js в проекте root (не src). Из документов : 

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

...