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

vue2 升级为 vite 打包

news 2026/4/4 14:08:02

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

用干词背单词，30天轻松背完小学词库1200单词！

用这个方法&#xff0c;30天轻松背完小学词库1200单词&#xff01;用干词背单词&#xff0c;30天能轻松背完小学词库1200单词&#xff01;而且会很轻松&#xff01;用干词App背完小学1200词&#xff0c;30天绰绰有余&#xff0c;甚至还能记得牢、忘得慢。小学英语单词量一般在8…...

编程新知 2026/4/4 14:04:35

提升效率利器：用快马平台生成openclaw智能安装器，自动适配环境一键搞定

最近在折腾openclaw这个工具时&#xff0c;发现手动安装真是费时费力。不同操作系统、Python版本、网络环境都要适配不同的安装方案&#xff0c;光是查资料和试错就花了大半天。于是我用InsCode(快马)平台做了个智能安装配置器&#xff0c;把整个过程自动化了&#xff0c;效率提…...

编程新知 2026/4/4 13:32:08

R中提供了一系列as.*函数，用于将数据从一种类型转换为另一种类型

下面的内容摘录自《用R探索医药数据科学》专栏文章的部分内容&#xff08;原文5220字&#xff09;。 2篇2章8节&#xff1a;用R做数据重塑&#xff0c;行列命名和数据类型转换_r语言数据命名-CSDN博客 在R语言中&#xff0c;行列命名和数据类型转换是数据处理中的两个基础性操…...

编程新知 2026/4/4 13:32:07

C++ 编译器优化参数解析

C编译器优化参数解析&#xff1a;提升性能的关键 在C开发中&#xff0c;编译器优化是提升程序性能的重要手段。通过调整编译器的优化参数&#xff0c;开发者可以在不修改代码的情况下显著提高程序的运行效率、减少内存占用或缩短启动时间。不同的优化选项适用于不同的场景&…...

编程新知 2026/4/4 12:04:20

如何在Windows 10上免费安装Android子系统：3步搞定完整指南

如何在Windows 10上免费安装Android子系统&#xff1a;3步搞定完整指南 【免费下载链接】WSA-Windows-10 This is a backport of Windows Subsystem for Android to Windows 10. 项目地址: https://gitcode.com/gh_mirrors/ws/WSA-Windows-10 想在你的Windows 10电脑上…...

编程新知 2026/4/4 12:00:19

联想拯救者Y7000系列BIOS隐藏功能一键解锁工具：3分钟开启高级设置，轻松安装黑苹果

联想拯救者Y7000系列BIOS隐藏功能一键解锁工具&#xff1a;3分钟开启高级设置&#xff0c;轻松安装黑苹果 【免费下载链接】LEGION_Y7000Series_Insyde_Advanced_Settings_Tools 支持一键修改 Insyde BIOS 隐藏选项的小工具&#xff0c;例如关闭CFG LOCK、修改DVMT等等 项目地…...

编程新知 2026/4/4 11:15:52

《AI应用实战课》第八课：大语言模型与垂直行业问答系统——从通识智能到产业落地的最后一公里

引言&#xff1a;站在巨变的时代路口 欢迎来到《AI 应用实战课》的最终章。如果说前七节课我们是在构建AI的“大脑”与“感官”——从数据的感知、特征的提取&#xff0c;到逻辑的推理、模式的识别——那么这第八节课&#xff0c;我们将为这个大脑注入最核心的“灵魂”&#xf…...

编程新知 2026/4/4 10:31:32

Video2X：让模糊视频焕然一新的AI视频增强神器

Video2X&#xff1a;让模糊视频焕然一新的AI视频增强神器 【免费下载链接】video2x A machine learning-based video super resolution and frame interpolation framework. Est. Hack the Valley II, 2018. 项目地址: https://gitcode.com/GitHub_Trending/vi/video2x …...

编程新知 2026/4/4 9:35:04

如何快速合并B站缓存视频？这个免费工具让你的离线观看体验无缝升级

如何快速合并B站缓存视频&#xff1f;这个免费工具让你的离线观看体验无缝升级 【免费下载链接】BilibiliCacheVideoMerge 项目地址: https://gitcode.com/gh_mirrors/bi/BilibiliCacheVideoMerge 你是否曾遇到这样的困境&#xff1a;在地铁上想观看缓存的B站番剧&…...

编程新知 2026/4/4 9:06:48

OpenClaw低配部署：gemma-3-12b-it在4GB内存设备上的运行方案

OpenClaw低配部署&#xff1a;gemma-3-12b-it在4GB内存设备上的运行方案 1. 为什么要在低配设备上部署OpenClaw&#xff1f; 去年我入手了一台二手Mac mini&#xff08;8GB内存版&#xff09;&#xff0c;本想用它作为家庭媒体中心&#xff0c;后来突发奇想&#xff1a;能不能…...

编程新知 2026/4/4 8:22:32