vue2 升级为 vite 打包

VUE2 中使用 Webpack 打包、开发,每次打包时间太久,尤其是在开发的过程中,本文记录一下 VUE2 升级Vite 步骤。
在这里插入图片描述

安装 Vue2 Vite 依赖

dev 依赖

@vitejs/plugin-vue2": "^2.3.3
@vitejs/plugin-vue2-jsx": "^1.1.1
vite": "^5.0.0
#选装,自动添加后缀
vite-plugin-resolve": "^2.5.2

npm 脚本

  "scripts": {"dev": "vite","build": "vite build","serve": "vite preview"},

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import vue2Jsx from '@vitejs/plugin-vue2-jsx';import path from 'path';export default defineConfig({plugins: [vue(), vue2Jsx(),{name: 'resolve-file-extension',resolveId(source, importer) {// Skip absolute paths or non-relative importsif (!importer || !source.startsWith('.') || source.includes('?')) {return null;}const extensions = ['.vue', '.js', '.ts', '.jsx', '.tsx']; // Add supported extensionsfor (const ext of extensions) {try {const resolvedPath = require.resolve(source + ext, { paths: [importer] });return resolvedPath;} catch (e) {continue;}}return null;},},],resolve: {extensions: ['.vue', '.js', '.jsx', '.ts', '.tsx'],alias: {'@': path.resolve(__dirname, './src'), // Alias `@` to `src` directory},},server: {host: '0.0.0.0',port: 8080,open: true,proxy: {'/api': {target: 'http://localhost:8090/', // Target server for `/api` requestsrewrite: (path) => path.replace(/^\/api/, '/'), // Remove `/api` prefixchangeOrigin: true, // Handle CORS},},},css: {preprocessorOptions: {less: {modifyVars: {// Uncomment and define your custom LESS variables here// "primary-color": "#377DF6",// "link-color": "#377DF6",},javascriptEnabled: true, // Enable JavaScript in LESS},},},build: {sourcemap: process.env.NODE_ENV === 'development', // Source maps for development},
});

index.html

将 Index.html 从 public 移动到根目录下,与 webpack 相关的去掉。

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="./favicon.ico"><title>TestTTT</title>
</head><body><noscript><strong>We're sorry,work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><div id="app"></div><script type="module" src="/src/main.js"></script><!-- built files will be auto injected -->
</body></html>

jsx

如果你的项目中使用了 jsx,需要在 script 中制定 lang="jsx"

<script lang="jsx">
export default {props:["title", "open", "label"],data() {return {}},
}
</script>

总结

Vue2 升级 Vite 比较顺利,几点要注意的:

  • 用 Vite 5.0,jsx 插件只支持到 Vite 5.0
  • Webpack 语法要移除
  • 其他遇到问题,让豆包把代码修改为 Vite 方式即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/891024.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20241227在ubuntu20.04.6系统中,如何用watch命令每秒钟调用nvidia-smi来监控GPU

watch -n 1 nvidia-smi 20241227在ubuntu20.04.6系统中&#xff0c;如何用watch命令每秒钟调用nvidia-smi来监控GPU 2024/12/27 17:04 缘起&#xff1a;在ubuntu20.04.6系统中&#xff0c;使用M6000显卡来跑whisper&#xff0c;显存拉满/占用巨大&#xff0c;但是CPU占用比低&…

[江科大STM32] 第五集STM32工程模板——笔记

保存&#xff0c;进去选芯片型号&#xff0c;我们是F10C8T6 再添加一些文件&#xff0c;自己看路径 然后去 复习这三文件 打开KEIL add existing那个&#xff0c;添加已经存在的文件 还有5个.c.h文件也要添加进来 回到KEIL 点击旁边的settings 如果你用寄存器开发就建到这里就可…

Bitmap(BMP)图像信息分析主要说明带压缩的形式

文章目录 参考资料Bitmap图片结构Bitmap图片组成实例说明 参考资料 微软官方-位图存储 Bitmap图片结构 序号名称说明1Bitmap File HeaderBitmap文件头2Bitmap Info HeaderBitmap信息头3Color Palette Data调色板数据4Bitmap Image Data图像数据 说明 Bitmap文件头的大小为…

二分和离散化

为什么把二分和离散化放一起&#xff1a;因为离散化其实是一种二分整数的过程。 二分 相信大家都接触过二分查找&#xff08;折半查找&#xff09;&#xff0c;这就是二分的思想。 二分通过每次舍弃一半并不存在答案的区间&#xff0c;进而快速锁定要求的答案&#xff08;二…

如何测试模型推理精度:Python初学者指南

如何测试模型推理精度&#xff1a;Python初学者指南 什么是模型推理精度&#xff1f;使用工具包&#xff1a;lm-evaluation-harness安装工具包 测试模型推理精度的步骤1. 加载模型和分词器2. 使用 lm-evaluation-harness 进行测试3. 运行脚本4. 查看结果 总结 在机器学习和深度…

行为树详解(5)——事件驱动

【分析】 如果行为树的节点很多&#xff0c;那么会存在要经过很多节点才会走到动作节点的情况。显然&#xff0c;性能上不如状态机。 每帧都需要重新遍历一系列节点才会走到动作节点&#xff0c;而实际上很多条件节点在数帧内不会有变化&#xff0c;这是造成性能问题的重要原…

ESP-IDF学习记录(2)ESP-IDF 扩展的简单使用

傻瓜式记录一个示例的打开&#xff0c;编译&#xff0c;运行。后面我再一个个运行简单分析每个demo的内容。 1.打开示例代码 2.选择项目&#xff0c;文件夹 3.选择串口 4.选择调试方式 5.根据硬件GPIO口配置menuconfig 6.构建项目 7.烧录设备&#xff0c;选择串口UART方式 运行…

SpringMVC学习(一)——请求与响应处理

目录 一、SpringMVC简介 二、RequestMapping&#xff1a;请求路径映射 三、RestController 四、请求限定 五、请求处理 1.使用普通变量&#xff0c;收集请求参数 2.使用RequestParam明确指定获取参数 3.目标方法参数是一个pojo 4.RequestHeader&#xff1a;获取请求…

数据分析的分类和EDIT思维框架

为了服务于企业不同层次的决策&#xff0c;商业数据分析过程需要提供相应的数据科学产出物。 一般而言&#xff0c;数据分析需要经历从需求层、数据层、分析层到输出层四个阶段。 第一个阶段是需求层——确定目标&#xff0c;具体目标需要依据具体的层次进行分析&#xff1a…

实验五 时序逻辑电路部件实验

一、实验目的 熟悉常用的时序逻辑电路功能部件&#xff0c;掌握计数器、了解寄存器的功能。 二、实验所用器件和仪表 1、双 D触发器 74LS74 2片 2、74LS162 1片 3、74194 1片 4、LH-D4实验仪 1台 1.双…

iOS 中的 nil、Nil、NULL、NSNull 僵尸对象和野指针

iOS 中的 nil、Nil、NULL、NSNull 僵尸对象和野指针-CSDN博客 类型含义使用场景示例nil表示一个指向 Objective - C 对象的空指针。在 Objective - C 和 Swift&#xff08;与 Objective - C 交互时&#xff09;中用于表示对象不存在。当一个对象变量没有指向任何有效的对象实例…

JS面试题|[2024-12-28]

1.JS的设计原理是什么&#xff1f; JS引擎 运行上下文 调用栈 事件循环 回调 执行流程&#xff1a; JS引擎将代码解析为电脑可以执行的代码&#xff0c;调用一些API&#xff08;运行上下文&#xff09;让浏览器执行 JS是单线程的&#xff0c;每次从调用栈里面取出来的代码进行调…

全面了解 SQL Server:功能、优势与最佳实践

SQL Server 是微软公司推出的一款关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;广泛应用于企业级数据存储、数据分析、应用开发等领域。作为全球最受欢迎的数据库管理系统之一&#xff0c;SQL Server 提供了强大的功能和工具&#xff0c;支持从小型应用到大型…

jdk动态代理和cglib动态代理对比

jdk动态代理和cglib动态代理对比&#xff1a; CGLIB 和 JDK 动态代理都可以用来在运行时生成代理对象 1. 基本概念 JDK 动态代理&#xff1a;只代理接口&#xff08;interface&#xff09;&#xff0c;无法代理类。它使用 java.lang.reflect.Proxy 类和 java.lang.reflect.I…

给vscode的新项目选择虚拟环境

按照通常的步骤新建了.vscode文件并生成了launch.json&#xff0c;都是通过左栏的调试按钮里的create a json file&#xff0c;但是 运行时还是没有识别&#xff0c;之后看到下面的这个链接里&#xff0c;图中是在>之后选择的环境&#xff0c;于是&#xff1a; ctrlG出现搜索…

攻破 Kioptix Level 1 靶机

找教程然后自己练习&#xff0c;论菜狗的自我修养 基本步骤 1.确定目标IP 2.扫描端口&#xff0c;服务&#xff0c;版本信息&#xff0c;漏洞信息 3.查找漏洞可利用脚本 4.运行脚步 一、信息获取 arp-scan -l nmap -sS -p- -sV -sC -A --min-rate5000 192.168.5.130 二、查…

b站ip属地评论和主页不一样怎么回事

在浏览B站时&#xff0c;细心的用户可能会发现一个有趣的现象&#xff1a;某些用户的评论IP属地与主页显示的IP属地并不一致。这种差异引发了用户的好奇和猜测&#xff0c;究竟是什么原因导致了这种情况的发生呢&#xff1f;本文将对此进行深入解析&#xff0c;帮助大家揭开这一…

如何使用fetch函数获取多个数据并同时使用(在嵌套的fetch函数之间传递数据)

&#xff08;一&#xff09;问题描述 需要读取多个数据&#xff0c;也就是有多个fetch函数&#xff0c;但是这些数据又需要同时用。由于fetch是异步的&#xff0c;因此每个fetch单独进行是没有办法同时获得数据的&#xff0c;此时有两种可行的方式。 &#xff08;二&#xff…

音视频入门基础:MPEG2-PS专题(2)——使用FFmpeg命令生成ps文件

通过FFmpeg命令可以将mp4文件转换为ps文件。由于ps文件对应的FFInputFormat结构为&#xff1a; const FFInputFormat ff_mpegps_demuxer {.p.name "mpeg",.p.long_name NULL_IF_CONFIG_SMALL("MPEG-PS (MPEG-2 Program Stream)"),.p.flags …

帝国cms电脑pc站url跳转到手机站url的方法

本文讲解一下帝国cms电脑网站跳转到手机动态网站和手机静态网站的方法,笔者以古诗词网 www.gushichi.com为例&#xff0c;为大家介绍操作步骤。方法一&#xff1a;帝国pc站跳转到手机静态站 1、假设我们有帝国cms 电脑网站www.XXX.com&#xff0c;手机网站m.XXX.com &#xf…