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 的地址了,也是我们刚刚创建出来的项目

猜你喜欢

转载自blog.csdn.net/qq_45477065/article/details/126904270