vue中如何引入html或将html转化成npm包？

Question

vue中如何引入html或将html转化成npm包？

发布于
2023-12-18 广西

如何将HTML变成npm包，或者怎么把本地的html在vue项目中引入。
代码如下:

<!DOCTYPE html>
<html class="x-strict x-viewport">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>听力检测</title>
  </head>

  <body>
    <div>
      <div id="leftear" style="cursor: crosshair; margin: 10px">
        <svg
          height="600"
          version="1.1"
          width="502"
          xmlns="http://www.w3.org/2000/svg"
          style="overflow: hidden"
        ></svg>
      </div>
      <div id="rightear" style="cursor: crosshair; margin: 10px">
        <svg
          height="600"
          version="1.1"
          width="502"
          xmlns="http://www.w3.org/2000/svg"
          style="overflow: hidden"
        ></svg>
      </div>
    </div>

    <script type="text/javascript" src="./files/raphael.js"></script>
    <script type="text/javascript" src="./files/raphael.export.js"></script>
    <script type="text/javascript" src="./files/ext-all.js"></script>
    <script type="text/javascript" src="./files/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="./files/jquery.js"></script>
    <script type="text/javascript" src="./files/dm.js"></script>
    <script type="text/javascript" src="./files/monthField.js"></script>
    <script type="text/javascript" src="./files/taffy-min.js"></script>
    <script
      type="text/javascript"
      src="./files/dm.module.drawaudiogram2.js"
    ></script>

    <script type="text/javascript">
      var L, R;        
        var applicantId = "1981";
            
        L = dmMOD.drawAudiogram("leftear", {
          onACMarker: function () {
            // Ext.getCmp("leftEarAc").setValue(L.getACAverage().val);
          },
        });

        L.init();
        R = dmMOD.drawAudiogram("rightear", {
          leftEar: false,
          onACMarker: function () {
            console.log("右");
            // Ext.getCmp("rightEarAc").setValue(R.getACAverage().val);
          },
        });
        R.init();
    </script>
  </body>
</html>

尝试将html文件放置assets目录下，但是无法正常打开

<template>
  <div>
    <iframe :src="localHtmlUrl" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
    data(){
        return {
            localHtmlUrl:'/assets/html/h.html'
        }
    }
}
</script>

javascript 前端 html npm vue.js

阅读 985

AI BotBETA

在 Vue 中，如果你想引入 HTML 文件，你通常会将它嵌入到一个 Vue 组件的模板中。然而，由于跨域限制，你可能无法直接从文件系统或网络上加载 HTML 文件。因此，如果你想在 Vue 项目中使用 HTML 文件，一种常见的做法是将 HTML 内容嵌入到 Vue 组件的 template 中。

例如，假设你有以下的 HTML 文件：

<!-- my-template.html -->
<div>
  <h1>Hello, World!</h1>
</div>

你可以在 Vue 组件中这样使用：

<template>
  <div>
    <div v-html="myTemplateContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myTemplateContent: '<h1>Hello, World!</h1>'
    }
  }
}
</script>

在上面的例子中，v-html 指令用于将 myTemplateContent 的内容插入到 Vue 组件的模板中。请注意，你需要确保你的 HTML 内容是可信的，以避免 XSS 攻击。

关于你的问题，如果你想把 HTML 变成 npm 包，你可以将 HTML 文件作为一个资源（asset）放入你的 Vue 项目中。但是，你不能将整个 HTML 文件作为 npm 包来安装，因为 npm 是用来管理 JavaScript 和 JavaScript 库的包管理器。HTML 文件不是 JavaScript，因此不能作为 npm 包来安装。

如果你希望将你的 HTML 文件作为一个模块来使用，你可以考虑将它转换为 JavaScript 或 Vue.js 的组件。这样你就可以在其他的 Vue.js 项目中引用和使用它。但是，这需要你熟悉 JavaScript 或 Vue.js 的语法和编程方式。

1 个回答

得票最新

nanvon

386

发布于
2023-12-18 安徽

放到public目录下

撰写回答