로컬 파일에서 HTML 가져오기

로컬 파일에서 HTML 가져오기

에 있는 파일에서 HTML 콘텐츠를 Import하는 방법을 찾고 있습니다.

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

두 숫자는 변수입니다.

이런 거 해야 되는데

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

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

하지만 방법을 찾을 수가 없어요.만약 누군가가 해결책을 안다면, 그것은 매우 도움이 될 것이다.

감사합니다.

첫 번째 Vue의 웹 팩은 로드 방법을 이해해야 합니다..html파일을 사용할 수 있습니다.먼저 설치합니다.

npm install html-loader --save-dev

다음으로 편집(또는 작성)vue.config.js(프로젝트 루트에는 없습니다)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

언급URL : https://stackoverflow.com/questions/61169217/vue-import-html-from-local-file