使用vite构建vue3基本工程

vite构建

https://vitejs.cn/

构建

​ 简单粗暴，就是需要注意对应vite版本支持的nodejs版本：

npm create vue@latest

报错：

​ 诸如此类就是配置的镜像源中没有对应插件，可以直接官网地址下载即：npm install vscode-uri

npm ERR! code E404
npm ERR! 404 Not Found - GET https://mirrors.cloud.tencent.com/npm/vscode-uri/-/vscode-uri-3.0.8.tgz
npm ERR! 404
npm ERR! 404  'vscode-uri@https://mirrors.cloud.tencent.com/npm/vscode-uri/-/vscode-uri-3.0.8.tgz' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\download\nodejs\node_cache\_logs\2024-12-14T03_28_10_233Z-debug-0.log

error when starting dev server:

处理方法

npm install -D vite@"^4.0.0 || ^5.0.0"
npm audit fix --force

工程结构

​ 目前未描述清楚，后续学习后补足。

┌─.vscode	可以查看插件
├─public	
├─src		源代码
│  ├─xxx
│  │  └─xxx
│  └─xxx
├─tsconfig.json
│  ├─env.d.ts		配置后ts可以识别 .png .txt 等文件
├─index.html		入口文件
├─package.json		包管理文件
├─READMD.md			对工程的介绍
├─tsconfig.json		ts配置文件
│  ├─xxx
│  ├─xxx
│  └─xxx
├─vite.confg.ts		整个工程的配置文件

关闭底部开发工具提示

vite.config.ts配置文件中注释对应插件代码即可