JavaWeb——Vue：打包部署（Nginx、目录介绍、部署及启动、访问 ）
目录
前端 Vue 项目的最后一步是打包部署。在当前前后端分离的开发模式中，前端开发人员开发前端代码，后端开发人员开发后端代码。最终要将开发及测试完毕的前端 Vue 代码和后端代码分开部署在对应的服务器上。
前端服务器当前最流行的是 Nginx。
打包部署其实是两步操作，第一步打包，第二步部署。
打包
先来讲解如何打包，对于 Vue 项目打包，直接执行第二个脚本即可。点击这个脚本后就可以进行打包，
然后等待打包完成：
打包之后会将打包后的文件放在 dist 这个目录下。
打包完成后，要进行项目部署。只需要将 dist 的这个目录下打包后的资源部署在服务器上就可以了。
部署
接下来需要将打包后的这些文件部署在 Nginx 服务器上。Nginx 是一款轻量级的 Web 服务器，也可以作为反向代理和静态资源服务器。它最大的特点是占用内存少、并发能力强，性能非常高，在现在各大互联网公司都有非常广泛的应用。今天只是使用它其中很小的一块功能，就是来部署前端 Vue 静态资源。
Nginx
Nginx
- 介绍：Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
- 官网：nginx news
这是 Nginx 的官网，下面有 Nginx 当中的一些概要信息。可以点击当前的链接，在这个界面就可以去下载 Nginx 的安装包。
选择当前稳定版本 1.22.0 这个版本。将安装包复制到一个没有中文路径的目录上，然后将这个压缩包解压到当前文件夹。
目录介绍
解压完毕后，介绍一下 Nginx 的安装目录。主要有四个目录：
- conf 用来保存 Nginx 的配置文件；
- html 是用来存放静态资源文件的，如果要部署一些静态资源，比如 CSS 文件，就可以将这些文件放在这个目录下；
- logs 存放的是 Nginx 运行的时候所产生的一些日志文件；
- 临时文件的存放目录 temp；
- 最后还有一个 nginx.exe ，这个是 Nginx 的可执行文件，启动 Nginx 就要通过这个来启动。
部署及启动
要将打包好的 Vue 静态资源部署到 Nginx 当中，应该放到 html 文件夹中。将打包好的 dist 目录下的静态资源文件复制到 Nginx 安装目录下的 html 文件夹当中，里面默认有两个文件，可以直接将这两个文件删掉，然后将打包好的文件复制进来。
接下来可以启动 Nginx，只需要双击 nginx.exe 文件就可以启动。Nginx 启动完毕之后会默认占用当前本机的 80 端口号。如果双击启动后没有反应，可以打开任务管理器查看是否存在 Nginx 的进程。
如果没有启动成功，可能是 80 端口被占用了，可以打开 Nginx 的运行日志目录，下面有一份 error.log 文件，会看到有提示 80 端口被占用。
- 部署：打包好的dist目录下的文件，复制到 nginx 安装目录的html目录下。
- 启动：双击 nginx.exe 文件即可，Nginx服务器默认占用80端口号
注意事项
Nginx默认占用80端口号，如果80端口号被占用，可以在 nginx.conf 中修改端口号。（netstat-ano|findStr 80）
访问
- 访问：http://localhost:80
端口号修改完毕之后，可以再次双击 nginx.exe 文件启动 Nginx ，然后在浏览器中输入 “localhost: 修改后的端口号” 就可以访问到在 Nginx 当中所部署的前端 Vue 代码。Nginx 的功能本身非常强大，这里只是演示一下 Nginx 当中部署 Vue 静态资源.
END
学习自：黑马程序员——JavaWeb课程
原文地址：https://blog.csdn.net/li13437542099/article/details/141405337
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！