当前位置： 首页 > news >正文

vue2 升级为 vite 打包

news 2026/2/11 3:16:58

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 方式即可

相关文章：

vue2 升级为 vite 打包

VUE2 中使用 Webpack 打包、开发&#xff0c;每次打包时间太久&#xff0c;尤其是在开发的过程中&#xff0c;本文记录一下 VUE2 升级Vite 步骤。 安装 Vue2 Vite 依赖 dev 依赖 vitejs/plugin-vue2": "^2.3.3 vitejs/plugin-vue2-jsx": "^1.1.1 vite&…...

编程日记 2024/12/27 14:01:24

FreeSwitch中启用WebRTC

在FreeSwitch中启用WebRTC需要进行一系列配置。以下是详细的步骤&#xff1a; 1. 安装必要的依赖&#xff1a; 确保安装了支持WebRTC的依赖库&#xff0c;如libsrtp。 2. 配置SIP Profile&#xff1a; 编辑 conf/sip_profiles/internal.xml 文件&#xff0c;添加或修改以下内…...

编程日记 2024/12/27 14:00:21

R语言的数据类型

标题&#xff1a;《探索R语言数据类型的奥秘》 引言&#xff1a; 在统计学和数据分析的世界里&#xff0c;R语言无疑是一颗璀璨的明星。它以其强大的数据处理能力和丰富的图形展示功能而受到广泛欢迎。然而&#xff0c;要熟练掌握并高效使用R语言&#xff0c;深入了解其数据类…...

编程日记 2024/12/27 13:59:20

基于UNET的图像分类

网络架构 UNet网络是一种革命性的图像分割架构，在图像分类任务中同样展现出卓越的性能。其独特的设计巧妙地平衡了全局信息捕捉和精细细节保留的需求，特别适合处理需要高度精确定位的任务。 UNet的核心设计理念体现在其 对称的编码器-解码器结构 中。这种结构不仅实现了高效…...

编程日记 2024/12/27 13:58:18

css文字折行以及双端对齐实现方式

使用flex布局后&#xff0c;文字超出容器部分不会自动折行了。实现代码如下&#xff1a; <el-row><el-col :span"24"><span class"label">姓名</span><span class"content">{{name}}</span></el-col>…...

编程日记 2024/12/27 13:57:17

华为云语音交互SIS的使用案例（文字转语音-详细教程）

文章目录 题记一 、语音交互服务&#xff08;Speech Interaction Service&#xff0c;简称SIS&#xff09;二、功能介绍1、实时语音识别2、一句话识别3、录音文件识别4、语音合成 三、约束与限制四、使用1、API2、SDK 五、项目集成1、引入pom依赖2、初始化 Client1&#xff09;…...

编程日记 2024/12/27 13:56:16

设计一个监控摄像头物联网IOT（webRTC、音视频、文件存储）

前言&#xff1a; 设计一个完整的 监控摄像头物联网 IoT 平台 涉及 视频直播和点播、WebRTC 和 文件存储模块&#xff0c;可以分为以下几个主要部分&#xff1a;摄像头设备、服务端处理、Web 前端、视频流存储和回放。以下是结合这些技术的一个具体完整流程设计&#xff0c;涵盖…...

编程日记 2024/12/27 13:50:10

学习笔记（prism--视频【WPF-prism核心教程】）--待更新

《一》框架介绍 prism是一个用于WPF…和winUI中构建的松散耦合&#xff0c;可维护和可测试的应用程序框架。帮助WPF开发人员以简化编写&#xff0c;维护和扩展来设计应用程序。 优点&#xff1a;遵循特定的约定&#xff0c;可自动将view/ViewModel建立DataContext的关系&#…...

编程日记 2024/12/27 13:49:09

Kafka无锁设计

前言 在分布式消息队列系统中，Kafka 的无锁设计是其高吞吐量和高并发的核心优势之一。通过避免锁的竞争，Kafka 能够在高并发和大规模的生产环境中保持高效的性能。为了更好地理解 Kafka 的无锁设计，我们首先对比传统的队列模型，然后探讨 Kafka 如何通过无锁机制优化生产者…...

编程日记 2024/12/27 13:45:01

【GO基础学习】gin框架路由详解

文章目录 gin框架路由详解&#xff08;1&#xff09;go mod tidy&#xff08;2&#xff09;r : gin.Default()&#xff08;3&#xff09;r.GET()路由注册 &#xff08;4&#xff09;r.Run()路由匹配 总结 gin框架路由详解 先创建一个项目&#xff0c;编写一个简单的demo&#…...

编程日记 2024/12/27 13:41:58

GPIO+TIM(无PWM)实现呼吸灯功能

程序特点&#xff1a; 1、模块化&#xff0c;可快速移植&#xff0c;5分钟便可完成移植。 2、通过GPIO普通定时器&#xff0c;实现呼吸灯功能。 3、PWM周期为5ms&#xff0c;占空比调节时间为20ms&#xff0c;占空比为100等份&#xff0c;即呼吸灯从暗到亮需要20ms*1002s。 …...

编程日记 2024/12/27 13:37:53

贪心算法.

贪心算法是指只从当前角度出发,做出当前情景下最好的选择,在某种意义上来说是局部最优解,并不从全局的角度做决策.如果贪心策略选择不恰当,可能无法得到全局最优解. 贪心算法的基本流程如下: 1.分析问题,确定优化目标,对变量进行初始化 2.制定贪心策略:在制定贪心策略时需要…...

编程日记 2024/12/27 13:34:49

Linux系统和makefile详解

### Linux系统详解 Linux是一个开源且功能强大的操作系统内核&#xff0c;自1991年由林纳斯托瓦兹首次发布以来&#xff0c;它已经成为全球最流行的操作系统之一。Linux的核心特性包括开源、多用户多任务、高稳定性与安全性&#xff0c;以及良好的跨平台能力。 1. **开源**&a…...

编程日记 2024/12/27 13:32:46

GitLab 将停止为中国区用户提供服务，60天迁移期如何应对？ | LeetTalk Daily

“LeetTalk Daily”&#xff0c;每日科技前沿&#xff0c;由LeetTools AI精心筛选&#xff0c;为您带来最新鲜、最具洞察力的科技新闻。 GitLab作为一个广受欢迎的开源代码托管平台&#xff0c;近期宣布将停止服务中国大陆、澳门和香港地区的用户提供服务。根据官方通知&#x…...

编程日记 2024/12/27 13:29:44

【杂谈】-AI搜索引擎如何改变传统SEO及其在内容营销中的作用

AI搜索引擎如何改变传统SEO及其在内容营销中的作用 文章目录 AI搜索引擎如何改变传统SEO及其在内容营销中的作用1、什么是AI搜索引擎2、AI搜索引擎对SEO策略的影响3、AI搜索引擎在内容营销转型中的作用4、AI搜索引擎在营销领域的挑战、道德问题和未来5、总结 在当今的数字营销世…...

编程日记 2024/12/27 13:28:43

PTA数据结构编程题7-1最大子列和问题

我参考的B站up的思路 题目 题目链接 给定K个整数组成的序列{ N 1 ​ , N 2 ​ , …, N K ​ }&#xff0c;“连续子列”被定义为{ N i ​ , N i1 ​ , …, N j ​ }&#xff0c;其中 1≤i≤j≤K。“最大子列和”则被定义为所有连续子列元素的和中最大者。例如给定序列{ -2, 1…...

编程日记 2024/12/27 13:26:40

深入浅出：AWT的基本组件及其应用

目录 前言 1. AWT简介 2. AWT基本组件 2.1 Button&#xff1a;按钮 2.2 Label&#xff1a;标签 ​编辑 2.3 TextField&#xff1a;文本框 2.4 Checkbox&#xff1a;复选框 2.5 Choice&#xff1a;下拉菜单 2.6 List&#xff1a;列表 综合案例 注意 3. AWT事件处理 …...

编程日记 2024/12/27 13:25:32

MySQL45讲 第三十六讲 为什么临时表可以重名？——阅读总结

文章目录 MySQL45讲 第三十六讲 为什么临时表可以重名&#xff1f;——阅读总结一、引言二、临时表与内存表的区别&#xff08;一&#xff09;内存表&#xff08;二&#xff09;临时表 三、临时表的特性&#xff08;一&#xff09;可见性与生命周期&#xff08;二&#xff09;与…...

编程日记 2024/12/27 13:22:28

WebRTC服务质量（11）- Pacer机制（03) IntervalBudget

WebRTC服务质量&#xff08;01&#xff09;- Qos概述 WebRTC服务质量&#xff08;02&#xff09;- RTP协议 WebRTC服务质量&#xff08;03&#xff09;- RTCP协议 WebRTC服务质量&#xff08;04&#xff09;- 重传机制&#xff08;01) RTX NACK概述 WebRTC服务质量&#xff08;…...

编程日记 2024/12/27 13:18:22

.NET常用的ORM框架及性能优劣分析总结

市面上有很多流行的 ORM&#xff08;对象关系映射&#xff09;框架可以用于 .NET 开发。本文主要针对以下几种常见的 ORM 框架&#xff0c;对其优劣进行分析及总结&#xff0c;希望能够帮助大家进行ORM框架的使用有所帮助。 1. Entity Framework (EF) 特点 • 官方支持&…...

编程日记 2024/12/27 13:13:16

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/2/5 4:36:53

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2026/2/4 4:39:19

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

编程新知 2025/12/27 19:12:07

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2026/2/5 14:35:21

[拓扑优化] 1.概述

常见的拓扑优化方法有&#xff1a;均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。 常见的数值计算方法有&#xff1a;有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。 将上述数值计算方法与拓扑优化方法结合&#…...

编程新知 2026/2/1 13:41:21

比特币：固若金汤的数字堡垒与它的四道防线

第一道防线&#xff1a;机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”&#xff08;Hashing&#xff09;就是一种军事级的加密术&#xff08;SHA-256&#xff09;&#xff0c;能将信函内容&#xff08;交易细节&#xf…...

编程新知 2025/12/11 5:48:20

HTML版英语学习系统

HTML版英语学习系统 这是一个完全免费、无需安装、功能完整的英语学习工具&#xff0c;使用HTML CSS JavaScript实现。 功能 文本朗读练习 - 输入英文文章&#xff0c;系统朗读帮助练习听力和发音&#xff0c;适合跟读练习&#xff0c;模仿学习&#xff1b;实时词典查询 - 双…...

编程新知 2026/1/28 17:37:26