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

vue3老项目如何引入vite

news 2026/5/20 4:31:01

vue3老项目如何引入vite

  1. 安装 npm install vite @vitejs/plugin-vue --save-dev Vite官方中文文档
  2. 修改package.json文件
    在这里插入图片描述
  3. 在 npm scripts 中使用 vite 执行文件
  "scripts": {"serve": "vite","build": "vite build","preview": "vite preview"},
  1. 新建一个 vite.config.ts 文件 与 package.json 文件同级
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})
  1. 将public/ 文件夹中的index.html 移到 与 package.json 文件同级 修改内容
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico " />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head><body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body></html>

  1. 如果有警告在这里插入图片描述

  2. 解决警告 加入 "type": "module"

  3. 在这里插入图片描述

  4. 卸载原有的webpacknpm uninstall webpack webpack-cli webpack-dev-server

  5. 搞定！ 更多配置，请各位同学去官网自行查询！

相关文章：

vue3老项目如何引入vite

vue3老项目如何引入vite 安装 npm install vite vitejs/plugin-vue --save-dev Vite官方中文文档修改package.json文件 在 npm scripts 中使用 vite 执行文件 "scripts": {"serve": "vite","build": "vite build","pr…...

编程日记 2023/12/28 19:15:42

javaEE -19（9000 字 JavaScript入门 - 4）

一&#xff1a; jQuery jQuery是一个快速、小巧且功能丰富的JavaScript库。它旨在简化HTML文档遍历、事件处理、动画效果以及与后端服务器的交互等操作。通过使用jQuery&#xff0c;开发者可以以更简洁、更高效的方式来编写JavaScript代码。 jQuery提供了许多易于使用的方法和…...

编程日记 2023/12/28 19:14:41

二叉树的非递归遍历|前中后序遍历

二叉树的非递归遍历 文章目录 二叉树的非递归遍历前序遍历-栈层序遍历-队列中序遍历-栈后序遍历-栈 前序遍历-栈 首先我们应该创建一个Stack 用来存放节点&#xff0c;首先我们想要打印根节点的数据&#xff0c;此时Stack里面的内容为空&#xff0c;所以我们优先将头结点加入S…...

编程日记 2023/12/28 19:10:36

开源minio-AWS-S3存储的部署及go操作详细

介绍 MinIO是一个开源的分布式对象存储服务&#xff0c;它允许用户在私有云或公有云环境中构建自己的对象存储基础设施。MinIO旨在提供高性能、高可用性的对象存储&#xff0c;并且与Amazon S3兼容&#xff0c;这意味着可以使用S3客户端工具和库直接与MinIO交互&#xff0c;而…...

编程日记 2023/12/28 19:09:35

【Web2D/3D】Canvas（第三篇）

1. 前言 <canvas>是HTML5新增元素&#xff0c;它是一个画板&#xff0c;开发人员基于它的2D上下文或webgl上下文&#xff0c;使用JS脚本绘制简单的动画、可交互画面&#xff0c;甚至进行视频渲染。 本篇介绍基于canvas的2D上下文绘制2D画面的一些方法和属性。 2. canvas…...

编程日记 2023/12/28 19:03:17

紫光展锐T820与飞桨完成I级兼容性测试 助推端侧AI融合创新

近日&#xff0c;紫光展锐高性能5G SoC T820与百度飞桨完成I级兼容性测试&#xff08;基于Paddle Lite工具&#xff09;。测试结果显示&#xff0c;双方兼容性表现良好&#xff0c;整体运行稳定。这是紫光展锐加入百度“硬件生态共创计划”后的阶段性成果。 本次I级兼容性测试完…...

编程日记 2023/12/28 19:02:16

3DV 2024 Oral | SlimmeRF：可动态压缩辐射场，实现模型大小和建模精度的灵活权衡

目前大多数NeRF模型要么通过使用大型模型来实现高精度&#xff0c;要么通过牺牲精度来节省内存资源。这使得任何单一模型的适用范围受到局限&#xff0c;因为高精度模型可能无法适应低内存设备&#xff0c;而内存高效模型可能无法满足高质量要求。为此&#xff0c;本文研究者提…...

编程日记 2023/12/28 19:00:14

【unity学习笔记】4.场景切换

创建空物体→创建脚本挂载在空物体上→打开脚本 1.创建所需要的场景 assets中点击创建场景 2.文件→生成设置 3.将需要的场景拖入 4.场景跳转 创建空对象&#xff0c;将脚本放在空对象上。 注意两个类&#xff1a;场景类、场景管理类 void Start(){//场景跳转SceneManager.Lo…...

编程日记 2023/12/28 18:56:11

LeetCode75| 滑动窗口

目录 643 子数组最大平均数 | 1456 定长子串中元音的最大数目 1004 最大连续1的个数 ||| 1493 删掉一个元素以后全为1的最长子数组 643 子数组最大平均数 | class Solution { public:double findMaxAverage(vector<int>& nums, int k) {double sum 0;double re…...

编程日记 2023/12/28 18:51:07

gulimall-002 分布式基础概念

1、微服务概念 微服务是一种非常流行的架构风格。 拒绝大型单体应用&#xff0c;基于业务边界进行服务微化拆分&#xff0c;各个服务独立部署运行。 每个服务运行在自己的单个进程使用轻量级机制通信可以使用不同的编程语言编写以及不同的数据存储技术 2、集群&分布式&…...

编程日记 2023/12/28 18:46:03

K8s之声明式APIs

大家好&#xff0c;我是升仔 引言 Kubernetes&#xff08;K8s&#xff09;是一个开源的容器编排系统&#xff0c;用于自动化部署、扩展和管理容器化应用。在K8s中&#xff0c;声明式APIs&#xff08;Application Programming Interfaces&#xff09;是一种核心概念&#xff0…...

编程日记 2023/12/28 18:44:02

Hive执行计划

Hive提供了explain命令来展示一个查询的执行计划&#xff0c;这个执行计划对于我们了解底层原理&#xff0c;Hive 调优&#xff0c;排查数据倾斜等很有帮助。 使用语法如下&#xff1a; explain query;在 hive cli 中输入以下命令(hive 2.3.7)&#xff1a; explain select s…...

编程日记 2023/12/28 18:43:00

Leetcode—62.不同路径【中等】

2023每日刷题&#xff08;七十二&#xff09; Leetcode—62.不同路径 超时dfs代码 class Solution { public:int uniquePaths(int m, int n) {int starti 1, startj 1;int ans 0;function<void(int, int)> dfs [&](int i, int j) {if(i m && j n) {a…...

编程日记 2023/12/28 18:41:59

【汇编笔记】初识汇编-内存读写

汇编语言的由来&#xff1a; CPU是计算机的核心&#xff0c;由于计算机只认识二进制&#xff0c;所以CPU执行的指令是二进制。 我们要想让CPU工作&#xff0c;就得给他提供它认识的指令&#xff0c;这一系列的指令的集合&#xff0c;称之为指令集。 指令集&#xff1a; 不同的体…...

编程日记 2023/12/28 18:36:55

Shell脚本通过渗透测试检测服务器安全！

以下是一个简单的 Shell 脚本通过渗透测试来发现服务器漏洞的例子&#xff1a; #!/bin/bash # 设置变量 server_url"http://example.com" server_port"80" script_path"/path/to/script.脚本" # 创建并打开 Web 服务器 web_server$(curl -s $se…...

编程日记 2023/12/28 18:35:54

数据结构--查找

目录 1. 查找的基本概念 2. 线性表的查找 3. 树表的查找 3.1 二叉排序树 3.1.1 定义: 3.1.2 存储结构&#xff1a; 3.1.3 二叉排序树的查找 3.1.4 二叉排序树的插入 3.1.5 二叉排序树删除 3.2 平衡二叉树&#xff08;AVL 3.2.1 为什么要有平衡二叉树 3.2.2 定义 3.3 B-树 3.3.1…...

编程日记 2023/12/28 18:34:53

IntelliJ IDEA Apache Dubbo，IDEA 官方插件正式发布！

作者&#xff1a;刘军 最受欢迎的 Java 集成开发环境 IntelliJ IDEA 与开源微服务框架 Apache Dubbo 社区强强合作&#xff0c;给广大微服务开发者带来了福音。与 IntelliJ IDEA 2023.2 版本一起&#xff0c;Jetbrains 官方发布了一款全新插件 - Apache Dubbo in Spring Frame…...

编程日记 2023/12/28 18:32:51

使用Visual Studio 2022 winform项目打包成安装程序.exe

winform项目打包 1.安装扩展插件 Microsoft Visual Studio Installer Projects 20222.在解决方案上新建一个setup project 项目3.新建成功如下图&#xff0c;之后添加你的winform程序生成之后的debug下的文件4.在Application Folder上点击右键->Add->项目输出->主输出…...

编程日记 2023/12/28 18:30:50

报错-idea pom.xml 有一条灰色横线

1. 背景 打开 idea 更新代码&#xff0c;发现有个 module 的 pom.xml 有一条灰色横线&#xff0c;导致这个 module 没有加载成功。 2. 原因 1&#xff09; 可能本地 Remove 了这个 module 2&#xff09;本地删除了这个 module &#xff0c;又从远端拉取了回来 3&#xff09…...

编程日记 2023/12/28 18:29:49

openmediavault(OMV) (19)云相册(3)mt-photos

简介 MT Photos是一款为Nas用户量身打造的照片管理系统。通过AI技术，自动将您的照片整理、分类，包括但不限于时间、地点、人物、照片类型。可以在任何支持Docker的系统中运行它。详情可查看mtmt.tech官网，mt-photos是付费订阅使用的，也可以一次性付费永久使用，具体使用mt…...

编程日记 2023/12/28 18:27:47

基于 HarmonyOS 6.0 的智能家政预约页面实战开发：从页面构建到跨端体验优化

基于 HarmonyOS 6.0 的智能家政预约页面实战开发&#xff1a;从页面构建到跨端体验优化 前言 随着 HarmonyOS 生态不断完善&#xff0c;HarmonyOS 6.0 已经不仅仅是一个移动端操作系统&#xff0c;而是逐渐演变为一个真正意义上的全场景分布式操作平台。对于开发者而言&#xf…...

编程新知 2026/5/20 4:03:13

LightV虚拟化技术：基于缓存一致性的高效内存管理方案

1. LightV技术背景与核心挑战虚拟化技术在现代计算系统中扮演着越来越重要的角色&#xff0c;从边缘设备到云基础设施都广泛采用。传统虚拟化通过资源抽象和隔离带来了显著优势&#xff0c;但也面临着几个关键瓶颈问题&#xff1a;1.1 传统虚拟化的性能瓶颈当前主流的虚拟化方案…...

编程新知 2026/5/20 3:54:41

UE材质背后的物理课：从菲涅尔到BRDF，理解PBR渲染的数学与视觉魔法

UE材质背后的物理课&#xff1a;从菲涅尔到BRDF&#xff0c;理解PBR渲染的数学与视觉魔法 当你在虚幻引擎中拖动粗糙度滑块时&#xff0c;是否思考过这个0到1的数值如何精确控制光线在虚拟表面的舞蹈&#xff1f;PBR渲染不是魔法&#xff0c;而是将自然界的光影规律翻译成计算机…...

编程新知 2026/5/20 3:13:21

树莓派I2C保姆级教程：从命令行工具到Python脚本，一次搞定多个传感器（附避坑指南）

树莓派I2C实战指南&#xff1a;从硬件调试到Python自动化控制 第一次接触树莓派的I2C接口时&#xff0c;我对着密密麻麻的引脚和传感器数据手册发呆了半小时。直到成功读取到第一个温湿度数据&#xff0c;才意识到I2C这种看似复杂的通信协议&#xff0c;其实就像一位耐心的翻译…...

编程新知 2026/5/20 3:10:48

【企业级实战】如何设计一套真正具备“100%物理交割能力”的白盒自研Web后端中台架构？（附核心拦截器代码）

在 2026 年企业级信息化项目交付中&#xff0c;“源码确权”与“独立脱机自运行”已经成为信创等保和数据合规的刚性技术指标。很多团队在交付网站或企业级 Web 门户时&#xff0c;由于依赖了带有云端鉴权验证的黑盒第三方插件&#xff0c;或者后台架构存在远程遥控隐患&#x…...

编程新知 2026/5/20 3:08:35

ENSP USG6000防火墙CPU占用飙到99%？可能是你的“小云朵”网卡选错了（VMware网卡避坑指南）

ENSP USG6000防火墙CPU占用率优化实战&#xff1a;VMware虚拟网卡配置全解析 当你在ENSP中成功启动USG6000防火墙后&#xff0c;是否遭遇过整个系统突然变得异常卡顿&#xff1f;打开任务管理器&#xff0c;发现ENSP进程的CPU占用率直逼99%&#xff0c;仿佛你的电脑正在执行某种…...

编程新知 2026/5/20 2:09:47

系统架构设计师-2025年05月综合案例回忆版

试题 试题一（必选题） 某公司开发一个在线大模型训练平台，支持Python代码编写、模型训练和部署，用户通过python编写模型代码，将代码交给系统进行模型代码的解析，最终由系统匹配相应的计算机资源进行输出，用户不需要关心底层硬件平台，在开发该平台架构时，设计了以下质…...

编程新知 2026/5/20 1:20:34

【设计模式 09】桥接：两条路各走各的

这一课讲桥接模式。什么在变&#xff1a;多个维度各自独立变化&#xff0c;绑在一起会组合爆炸。怎么挡&#xff1a;拆成独立体系&#xff0c;用组合连接&#xff0c;各自扩展互不影响。陈敏把组织架构图展开在会议桌上的时候&#xff0c;在场所有人都看到了问题。 产品线三条&…...

编程新知 2026/5/20 1:12:32

别再傻傻分不清！PECL、CML、LVDS三种高速差分接口，硬件工程师选型避坑指南

高速差分接口选型实战&#xff1a;PECL、CML、LVDS的工程化决策指南 当PCB布线密度突破8层板、信号速率迈入Gbps时代&#xff0c;差分接口的选择直接决定系统稳定性。某通信设备厂商曾因误用LVPECL接口导致整批产品EMC测试失败&#xff0c;损失超百万——这类故事在硬件圈屡见不…...

编程新知 2026/5/20 0:54:57

Head Activator ；pPPGGSKVILF

一、基础信息多肽名称&#xff1a;头部激活因子三字母序列&#xff1a;Pyr-Pro-Pro-Gly-Gly-Ser-Lys-Val-Ile-Leu-Phe单字母序列&#xff1a;pPPGGSKVILF氨基酸数量&#xff1a;11 aa分子式&#xff1a;C54H84N12O14分子量&#xff1a;1125.34结构特征&#xff1a;N 端 Pyr&…...

编程新知 2026/5/20 0:40:30