使用vite打包并部署vue项目到nginx

1 使用 Vite 创建 vue3 项目

Vite 是一个新型的前端构建工具，专为现代浏览器和工具链而设计，提供了极快的冷启动和热模块更新（HMR）速度。以下是使用 Vite 创建 Vue 3 项目的详细步骤：

一、安装 Node.js 和 npm

首先，确保计算机上安装了 Node.js 和 npm（Node 包管理器）。具体安装方法这里不再赘述，可以在命令行中运行 node -v 和 npm -v 来检查它们是否已安装以及安装的版本。

二、全局安装 Vite

接下来，需要全局安装 Vite。打开命令行或终端，并运行以下命令：

npm install -g create-vite

或者，如果使用的是 Yarn，可以运行：

yarn global add create-vite

注意：从 Vite 2.x 版本开始，官方推荐使用 npm init vite@latest 命令来创建新项目，而不是全局安装 create-vite。因此，下面的步骤将基于这种新方法。

三、 创建 Vue 3 项目

现在，可以使用 npm init 命令来创建一个新的 Vite 项目，并指定使用 Vue 作为框架：

npm init vite@latest my-vue3-project -- --template vue

将 my-vue3-project 替换为想要的项目名称。这个命令会创建一个名为 my-vue3-project 的新文件夹，并在其中初始化一个 Vite + Vue 3 的项目。

四、进入项目目录并安装依赖

创建项目后，进入项目目录并安装依赖项：

cd my-vue3-project
npm install

或者，如果使用的是 Yarn：

cd my-vue3-project
yarn

五、运行项目

安装完依赖项后，可以运行项目：

npm run dev

或者，如果使用的是 Yarn：

yarn dev

Vite 会启动一个开发服务器，并在的默认浏览器中打开一个新的标签页