首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vite构建vue3新项目

vite如何实现构建vue3新项目

2025-05-31 18:53:48 作者：weixin_45658815

这篇文章主要介绍了vite如何实现构建vue3新项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite构建vue3新项目

Vite 是新一代前端构建工具，速度极快，是创建 Vue 3 项目的推荐方式。

一、环境准备

确保你本地已安装：

Node.js（推荐版本 ≥ 16）
npm 或 yarn 或 pnpm

检查命令：

node -v
pnpm -v

二、项目创建

1.使用命令快速创建

pnpm create vite kaishu-vue-ui
# 或者使用 yarn
# yarn create vite kaishu-vue-ui
# 或者使用 pnpm
#  npm create vite@latest kaishu-vue-ui

2.选择框架

命令行会提示选择框架：选择vue+ts(TypeScript)

①:Select a framework（选择框架）

|
*  Select a framework:
|    Vanilla
|  > Vue
|    React
|    Preact
|    Lit
|    Svelte
|    Solid
|    Qwik
|    Angular
|    Marko
|    Others
—

②Select a variant（选择变体/版本）

|
o  Select a framework:
|  Vue
|
*  Select a variant:
|  > TypeScript
|    JavaScript
|    Official Vue Starter ↗
|    Nuxt ↗

3.安装依赖

vscode等开发软件打开项目，执行命令：

pnpm i
# 或者使用
# pnpm install

4.项目启动

同上，执行命令：\

pnpm run dev

我这里有个报错，同样情况的小伙伴可以关注一下，报错如下：

TypeError: crypto$2.getRandomValues is not a function

好像是因为vite版本过高，将vite版本从^6.3.5降为4.5.11(该版本是安全版本，部分版本如果开放外网的话有漏洞）即可正常启动，默认运行在 http://localhost:5173

在这里贴出具体的依赖版本，供大家参考：

{
    "name": "kaishu-vue-ui",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc -b && vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "vue": "^3.5.13"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^5.2.3",
        "@vue/tsconfig": "^0.7.0",
        "typescript": "~5.8.3",
        "vite": "4.5.11",
        "vue-tsc": "^2.2.8"
    }
}

ps：博主nodejs与pnpm版本如下，大家可以用以参考

node -v
v16.19.1

pnpm -v
8.6.6

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。