时间戳

首页 > 解决方案 > Vue从本地文件导入HTML

html - Vue从本地文件导入HTML

问题描述

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

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

这两个数字是变量。

我需要做类似的事情

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

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

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

谢谢

标签： htmlvue.jswebpackvuejs2vue-cli

解决方案

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

npm install html-loader

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

推荐阅读