vue3老项目如何引入vite

news2025/11/9 2:42:31

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. 搞定！ 更多配置，请各位同学去官网自行查询！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uniapp使用colorUI

uniapp使用colorUI

colorUI 微动画 | ColorUI 使用文档 1&#xff1a;把colorui里三个文件复制到自己项目中去 App.vue </script> <style> import url(colorui/icon.css); import url(colorui/main.css); import url("colorui/animation.css");-webkit-keyframes show {…
阅读更多...
华清远见嵌入式学习——ARM——作业2

华清远见嵌入式学习——ARM——作业2

目录 作业要求&#xff1a; 现象&#xff1a; 代码&#xff1a; 思维导图&#xff1a; 模拟面试题&#xff1a; 作业要求&#xff1a; GPIO实验——3颗LED灯的流水灯实现 现象&#xff1a; 代码&#xff1a; .text .global _start _start: 设置GPIOEF时钟使能 0X50000…
阅读更多...
opencv视频文件的读写

opencv视频文件的读写

目录 opencv视频文件的读写 OpenCV调用电脑摄像头 opencv视频文件的读写 在OpenCV中&#xff0c;你可以使用 cv2.VideoCapture 类 来读取视频文件&#xff0c;使用 cv2.VideoWriter 类来写入视频文件。 下面是一个简单的例子&#xff0c;演示如何使用OpenCV读取视频文件、处…
阅读更多...
显示器屏幕oled的性能、使用场景、维护

显示器屏幕oled的性能、使用场景、维护

OLED显示器屏幕具有许多独特的性能和使用场景&#xff0c;以下是关于OLED显示器屏幕的性能、使用场景和维护的详细介绍&#xff1a; 一、性能 色彩鲜艳&#xff1a;OLED显示器屏幕能够呈现出更加鲜艳的色彩&#xff0c;色彩饱和度高&#xff0c;色彩还原性好&#xff0c;可以给…
阅读更多...
css学习笔记6（盒子模型）

css学习笔记6（盒子模型）

CSS盒子模型 五、CSS盒子模型1.CSS长度单位2.元素的显示模式3.总结各元素的显示模式4.修改元素显示模式5.盒子模型的组成6.盒子内容区&#xff08;content&#xff09;7.关于默认宽度8.盒子内边距&#xff08;padding&#xff09;9.盒子边框&#xff08;border&#xff09;10.盒…
阅读更多...
听GPT 讲Rust源代码--src/tools(22)

听GPT 讲Rust源代码--src/tools(22)

File: rust/src/tools/tidy/src/lib.rs rust/src/tools/tidy/src/lib.rs是Rust编译器源代码中tidy工具的实现文件之一。tidy工具是Rust项目中的一项静态检查工具&#xff0c;用于确保代码质量和一致性。 tidy工具主要有以下几个作用&#xff1a; 格式化代码&#xff1a;tidy工具…
阅读更多...
力扣单调栈算法专题训练

力扣单调栈算法专题训练

目录 1 专题说明2 训练 1 专题说明 本博客用来计算力扣上的单调栈题目、解题思路和代码。 2 训练 题目1&#xff1a;2866美丽塔II。 解题思路&#xff1a;先计算出prefix[i]&#xff0c;表示0~i满足递增情况下&#xff0c;0~i上的元素之和最大值。然后计算出suffix[i]&#…
阅读更多...
前端微信小程序AES加密解密踩坑

前端微信小程序AES加密解密踩坑

项目场景&#xff1a; 今天蛮沮丧的&#xff0c;在和别人对接的时候aes加解密的时候踩了坑。今天有个同事请假了&#xff0c;所以本来他和别人对接的活&#xff0c;老大给了我&#xff0c;然后我就正式踏上了战战兢兢的对接之路。 1.一开始的时候对面先是问用的啥加密方法。这…
阅读更多...
XUbuntu22.04之跨平台音频编辑工具(平替Audition):ocenaudio(二百零二)

XUbuntu22.04之跨平台音频编辑工具(平替Audition):ocenaudio(二百零二)

加粗样式 简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#…
阅读更多...
STM32F4 HAL流水灯Proteus仿真

STM32F4 HAL流水灯Proteus仿真

源码下载&#xff1a;https://download.csdn.net/download/zlkk00/88654405
阅读更多...
[python]python实现对jenkins 的任务触发

[python]python实现对jenkins 的任务触发

目录 关键词平台说明背景一、安装 python-jenkins 库二、code三、运行 Python 脚本四、注意事项 关键词 python、excel、DBC、jenkins 平台说明 项目Valuepython版本3.6 背景 用python实现对jenkins 的任务触发。 一、安装 python-jenkins 库 pip install python-jenkin…
阅读更多...
VSCode SSH 连接提示： spawn UNKNOWN

VSCode SSH 连接提示： spawn UNKNOWN

随笔记录 目录 1. 背景介绍 2. 确认问题 : ssh -V 3. 解决问题 3.1 确认本地 ssh.exe 路径 3.2 修改vscode Remote.ssh:Path 3.2.1 设置 Reomte.ssh:Path - 方法一 3.2.2 设置 Reomte.ssh:Path - 方法二 1. 背景介绍 windows 系统vscode ssh remote CentOS7&#xff…
阅读更多...
Pycharm报的一些Python语法错误

Pycharm报的一些Python语法错误

Pycharm报的一些Python语法错误 1、PEP8:Expected 2 blank less:found 1 意思是&#xff1a;类和上面的行要间隔两行&#xff0c;现在只有一行 解决办法&#xff1a; 间隔2行 2、Remove redundant parentheses 意思是&#xff1a;删除多余的括号 解决&#xff1a;删掉外面括…
阅读更多...
PIC单片机项目（7）——基于PIC16F877A的智能灯光设计

PIC单片机项目（7）——基于PIC16F877A的智能灯光设计

1.功能设计 使用PIC16F877A单片机&#xff0c;检测环境关照&#xff0c;当光照比阈值低的时候&#xff0c;开灯。光照阈值可以通过按键进行设置&#xff0c;同时阈值可以保存在EEPROM中&#xff0c;断电不丢失。使用LCD1602进行显示&#xff0c;第一行显示测到的实时光照强度&a…
阅读更多...
让生活更智能，P1600边缘智能网关带你进入智能家居新时代

让生活更智能，P1600边缘智能网关带你进入智能家居新时代

一、什么是P1600边缘智能网关&#xff1f; 在科技日新月异的今天&#xff0c;我们的生活已经被各种智能产品所包围。而在这个智能化的浪潮中&#xff0c;P1600边缘智能网关以其独特的优势&#xff0c;成为了智能家居的重要组成部分。那么&#xff0c;什么是P1600边缘智能网关呢…
阅读更多...
机器学习笔记 - 音频信号处理基础知识

机器学习笔记 - 音频信号处理基础知识

一、音频处理基础 音频处理是指使用各种技术和算法对音频信号进行操作和修改。 它涉及对音频数据应用数字信号处理 (DSP) 方法，以增强、修改或分析声音。音频处理广泛应用于各种应用中，包括音乐制作、电信、语音识别、音频压缩等。 1、信号类型 连续信号：连续信号或连续时间…
阅读更多...
自动化边坡监测设备是什么？

自动化边坡监测设备是什么？

随着科技的不断进步&#xff0c;我们的生活和环境也在不断地发生变化。然而&#xff0c;自然灾害仍然是我们无法完全避免的风险。其中&#xff0c;边坡滑坡就是一种常见的自然灾害。为了保护人民的生命财产安全&#xff0c;科学家们研发出了自动化边坡监测设备。 WX-WY1 自动化…
阅读更多...
Go语言基础：深入理解结构体

Go语言基础：深入理解结构体

Go语言基础&#xff1a;深入理解结构体 引言&#xff1a;Go语言与结构体的重要性结构体的定义与声明结构体与方法结构体的嵌入与匿名字段结构体的继承与多态性结构体与性能优化结论&#xff1a;结构体在Go中的应用场景 引言&#xff1a;Go语言与结构体的重要性 在当今迅速发展…
阅读更多...
Ubuntu 常用命令之 df 命令用法介绍

Ubuntu 常用命令之 df 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 在Ubuntu系统下&#xff0c;df命令是用来查看文件系统的磁盘空间占用情况的。df是disk free的缩写&#xff0c;这个命令可以获取硬盘被占用了多少空间&#xff0c;还有多少空间是可用的&#xff0c;硬盘的挂载点等信息。 df命令的…
阅读更多...
[Angular] 笔记 6：ngStyle

[Angular] 笔记 6：ngStyle

ngStyle 指令: 用于更新 HTML 元素的样式。设置一个或多个样式属性&#xff0c;用以冒号分隔的键值对指定。键是样式名称&#xff0c;带有可选的 .<unit> 后缀&#xff08;如 ‘top.px’、‘font-style.em’&#xff09;&#xff0c;值为待求值的表达式&#xff0c;得到…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023