javascript - vue中如何引入html或将html转化成npm包？
如何将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>共有2个答案
放到public目录下
在 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 的语法和编程方式。
-
我正在获取一个json对象,该对象如下所示： 然后，我使用模板文字追加页面上的对象，如下所示 我遇到的问题是，我需要${item.entry}来观察JSON中的html和段落中断。我该怎么做？
-
问题内容： 当我尝试粘贴到HTML文本文件中时，我总是被踢出外壳。如何才能做到这一点？我首先需要使用一些JavaScript对其进行编码吗？ 例： 编辑 我只在HTML中放入单引号，然后将整个内容都用双引号引起来，但仍然没有好处。外壳错误： 问题答案： 您需要删除或编码字符串中的控制字符。 例如，将您的文本粘贴到此处，然后编码为UTF-8 ECMAScript（表示javascript字符串）。
-
需求: 后端会返回一个各种内容组合的数据到前端。前端需要根据对应的名称生成各种展示样式 例: 上面有三个简单的示例(/业务场景比这个多): name: 需要直接输出即可, address: 需要按某种格式输出, capital: 需要每个投资人一行. 其中capital.name要增加连接 现代码: printChangeItem方法负责将英文键换成中文. printAdapterExpr方法根据
-
Java+Selenium如何实现将HTML页面转换成图片? 对于页面总高度比较小的页面,可以直接给Dimension设置一个比较大的高度,一次性截取;但是对于页面总高度比较大的页面,即使给Dimension设置一个非常大的高度,也无法截取完整的页面. 因为上述原因,我使用window.scrollBy(0,X)来滑动页面,想每次截高度X的内容,然后向下移动X,然后重新截图.但从结果来看,并不符合
-
问题内容： 这是我的HTML： 如何使用JavaScript来使我的链接点的属性base64编码的网页，其来源是的？ 除了在JavaScript中之外，我基本上想在这里进行相同的转换（选中了base64复选框）。 问题答案： 数据URI的特征 甲数据-URI与MIME类型必须是在其中一种格式： 不需要Base-64编码。如果您的代码包含非ASCII字符，例如，则必须添加。 必须转义以下字符： -F
-
问题内容： 我维护着一个公告板，用于将富文本消息保存为HTML。现在，我需要将所有这些消息迁移到需要HTML的BBCode表示的Joomla Kunena公告板上。 是否有任何库可以将HTML干净地转换为BBCode。有大量的脚本，可以将BBCode转换为HTML，但是没有相反的方法。 谢谢… 问题答案： 它应该可以在 文本输出模式下 与XSLT一起 使用 ： 要到达那里，解析HTML并使用内置的