nginx打包部署前端vue项目全过程【保姆级教程】

    🤹‍♀️潜意识Java：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

---

目录

一. 打包

1.1 打包命名

1.2 打包命令执行

1.3 如何看是否打包成功

二. 下载nginx打包文件

2.1 解压文件

​编辑 2.2 打开文件

 三 . 部署到nginx 

3.1 打开dist 

3.2 部署到nginx 

四. 启动nginx 

 4.1 启动nginx

4.2 打开项目

---

一. 打包

1.1 打包命名

npm run build

1.2 打包命令执行

上面的打包命令在终端中执行即可，这里主要是vue项目的打包部署全过程

1.3 如何看是否打包成功

多了个dist文件夹就是打包成功了！ 

二. 下载nginx打包文件

可以去官网里面去下载，这是我从官网中下载下来的。

nginx下载教程

2.1 解压文件

如图所示【一定要在全英文路径下，否则会出现莫名其妙的报错】 

 2.2 打开文件

 三 . 部署到nginx 

3.1 打开dist 

我们的文件可能不同，反正复制所有文件即可！

 

3.2 部署到nginx 

 

打开html 

然后把刚刚复制的全部粘贴到html中！ 

这样就成功了！ 

四. 启动nginx 

 4.1 启动nginx

点最下面的nginx.exe，会闪一下，就是打开了 

4.2 打开项目

 nginx的端口号默认端口是80

因此随便一个浏览器访问 localhost:80  即可打开部署好的前端项目

4.3 打开localhost:80，如果有页面，那么就是成功了

---

 

    🤹‍♀️潜意识Java：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！