004用vite构建vue项目并把发布到nginx

我们要学习vite项目，可以在官网中一步一步的学习，开始 | Vite 官方中文文档

我们根据这里的提示来一步步的创建第一个Vite项目。

我们选择在cmd中使用这条命令来创建第一个vite项目：

npm create vite@latest my-vue-app -- --template vue

首先，我们先使用管理员身份运行cmd，接着我们切换到我们的项目文件夹，

比如这里是我们以后Vite项目的文件夹，我们可以点击上方的这个地址栏然后复制（注意！这个项目文件夹一定要是空的）

然后我们在cmd命令框中输入cd空格 然后直接右键单击粘贴路径，回车，我们发现路径位置并没有变化，是因为我们还没有切换盘符，然后我们输入d：回车就可以切换到我们想要的目录了

对了，这种命令语法叫做DOS语法，感兴趣的同学可以自行百度搜索一下

切换进来之后我们再来粘贴我们早已准备好的创建Vite项目的命令

好了， 创建成功，我们这条命令中，create是创建的一次，vite@latest是创建最新版本的vite，my-vue-app是我们的项目名称，这个我们可以自己更改的，并且我们创建完之后，下方就显示，完成。现在运行：这三条命令，我们来一条条复制粘贴运行。

对了，在DOS命令框中的复制是左键选中然后右键就已经复制好了，想要粘贴的话直接右键单击就可以

好了，出现这个界面就代表着我们已经运行成功，可以访问下边的这个网址看一下

到这里，我们的第一个Vite项目就已经搭建完成了。

好了，接下来开始打包，还是在命令行中，如果我们想要退出这个界面怎么办呢，我们可以输入ctrl+c来终止这个程序。

输入这条命令进行打包，打包完成之后的文件都在my-vue-app项目的dist目录下，我们在文件资源管理器中找到这个文件夹

npm run build

接下来我们将这里的两个文件和一个文件夹全部复制到nginx的html目录中：

就是这个位置，我们直接粘贴就可以，因为已经有index.html文件了，会提示重名是否覆盖，我们直接点击覆盖即可。

好了， 接下来我们再运行nginx，然后去浏览器访问

可以看到上边的地址就是我们的nginx 的地址了，也是我们刚刚创建出来的项目