首页 > 其他分享 >VIte+Vue3 打包在本地 双击 index.html 打开项目

VIte+Vue3 打包在本地 双击 index.html 打开项目

时间:2023-10-27 11:13:48浏览次数:41  
标签:npm index legacy html vitejs 双击 打包

npm i @vitejs/plugin-legacy
npm i @babel/preset-env
npm i terser

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  base:"./",
  plugins:[
    vue(),
    legacy({
      targets:["defaults","not IE 11"],
    })
  ]
});

打包完成后,需要把 script 标签里面的 nomodule,crossorigin 属性删掉
删掉含有 type="module" 的标签
data-src 属性换成 src。

标签:npm,index,legacy,html,vitejs,双击,打包
From: https://www.cnblogs.com/IWings/p/17791748.html

相关文章

  • html自适应手机、平板问题
    1.1meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport是用户网页的可视区域。翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个......
  • 问题:vue3 使用 vite 构建的项目打包后无法打开index.html文件,或者显示一片空白
    一、问题描述项目build之后,点击dist文件中的index.html文件,打开是空白,提示以下信息。二、产生原因及解决方法1.文件路径不对vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置2.跨域问题vite构建打包后,默认启用ESModule,跨module......
  • HTML拖拽API, 看了某位大佬的视频, 有感而发
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title&g......
  • 《HTML5秘籍.第2版》高清高质量 原版电子书PDF
    下载:https://pan.quark.cn/s/0284694919cc......
  • html中如何设置label自动换行
    html中如何设置label自动换行在HTML中,我们经常需要设置label标签,这是一种非常常见且重要的标签。在有些情况下,我们的label标签中的文本可能会超出一行,这时就需要设置自动换行。为了实现在label标签中自动换行,我们需要使用CSS语言中的white-space属性,将其设置为"pre-wrap"或"pre......
  • html基础之列表
    html的列表在html中列表分为有序列表、无序列表和自定义列表,它们之间有什么相同点和不同之处我们来讲讲。有序列表有序列表的英文单词(orderedlists),所以有序列表的标签为<ol>列表的英文单词(listitem),所以列表内容的标签为<li>,有序列表都是需要<ol>标签和<li>标签相互配合使用......
  • html基础内容之表格
    html表格html制作一个表格需要用到以下3中标签。①table标签:双标签用来定义这是一个表格②tr标签:双标签用来定义行数③td标签:双标签用来定义列数如果进行定义一个表格:1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="UTF-8">6<title>......
  • 甘特图组件DHTMLX Gantt用例 - 如何自定义任务、月标记和网格新外观
    dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。本文将为大家揭示DHTMLXGantt自定义的典型用例,包括自定义任务、网格的新外观等,来展示其功能的强大性!用例-新建项目外观、当前月份标记和可折叠网格D......
  • 基于html5+javascript技术开发的房贷利率计算器,买房的码农们戳进来
    房贷计算器是一款专为购房者设计的实用工具应用,其主要功能是帮助用户详细计算房贷的还款金额、利息以及还款计划等。通过这款软件,用户可以更加便捷地了解到自己的还款情况和计划,从而更好地规划自己的财务。下面将对房贷计算器进行详细的介绍。体验地址房贷计算器体验地址关键......
  • trainTest.html
    <!DOCTYPEhtml><html><head><%include("/WEB-INF/pages/include/listCss.btl"){}%><linkhref="https://cdn.xiaoluxueche.com/staticSource/bootstrap-switch/bootstrap-switch.min.css"rel="stylesheet......