2.1.3 基于 Vue 的假日旅社管理系统
博客：博客介绍
教学课程：CSDN 学院教学课程
2.1.4 基于 Vue 的医院门诊预约挂号系统
博客：博客介绍
2.1.5 基于 Vue 的资产出入库管理系统
博客：博客介绍
2.1.6 更多…
更多题材的 Vue 系统可在文章底部评论区互动！
2.2 编译 Vue 项目
2.2.1 获取项目源代码
选定待打包的 Vue 项目后，先把项目源代码克隆到本地，克隆命令为 git clone 仓库地址，如下所示。
git clone git@gitee.com:yyzwz/template.git
代码下载完成后，打开项目文件夹，如下图所示。
2.2.2 安装依赖、编译项目
若你的电脑没有配置 node.js 和 Vue 脚手架，或者不知道如何安装 VsCode，可以移步 Vue 环境配置讲解。
使用 VsCode 打开项目的 front 文件夹。
运行 npm i 命令。
安装完成后，界面如下图所示。
接着使用 npm run build 命令，生成编译文件，编译成功后如下图所示。
可以发现在项目根目录多了个 dist 文件夹，如下图所示，这里面就是存放了 Vue 项目的待部署文件。
2.2.3 Nginx 配置
Nginx 和 Tomcat 一样，是一个轻量级的应用服务器，官网下载页面是：Nginx 下载。
同学们可以下载最新稳定版的 Nginx，如下图所示。
下载完成后解压到指定目录，如下图所示。
打开 conf 目录下的 nginx.conf 配置文件，编译为如下所示。
如果你没有域名，可以使用下面的配置
#worker角色的工作进程的个数 设置为CPU逻辑数量的两倍 worker_processes 1; events { #每一个worker进程能并发处理（发起）的最大连接数 worker_connections 2048; } http { #开启高效文件传输模式 sendfile on; #长连接超时时间，单位是秒 keepalive_timeout 65; #用于指定响应客户端的超时时间 send_timeout 30; #允许客户端请求的最大单文件字节数。 client_max_body_size 100m; #缓冲区代理缓冲用户端请求的最大字节数 client_body_buffer_size 128k; #导入外部配置文件 文件扩展名与文件类型映射表 include mime.types; #让浏览器认为响应是普通的文件流，并提示用户下载文件 如 图片 pdf等 default_type application/octet-stream; charset utf-8; tcp_nopush on; gzip on; #压缩最小文件阀值 gzip_min_length 1k; #缓冲区大小 gzip_buffers 4 16k; #http协议版本 gzip_http_version 1.0; #IE版本1-6不支持gzip压缩，关闭 gzip_disable 'MSIE[1-6].'; #压缩级别 gzip_comp_level 6; #需要压缩的文件格式 gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif; #告知客户端能否缓存 gzip_vary on; #反向代理时使用 gzip_proxied off; #负载均衡 upstream zwz { server 127.0.0.1:8081 weight=1; } server { listen 8080; server_name localhost; # server_name artskyhome.com; client_max_body_size 100m; # 设置解决大json返回不完整问题 proxy_buffers 16 1024k; proxy_buffer_size 1024k; #保留代理之前的真实客户端ip proxy_set_header X-Real-IP $remote_addr; #在多级代理的情况下，记录每次代理之前的客户端真实ip proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; charset utf-8; location / { root html; index index.html index.htm; add_header 'Access-Control-Allow-Origin' '*'; } location /zwz { proxy_pass http://zwz; } error_page 404 /404.html; } }
如果你有域名，并且有 SSL 证书，可以使用如下的配置，其中 1.pem 和 1.key 是 SSL 的证书文件。
#worker角色的工作进程的个数 设置为CPU逻辑数量的两倍 worker_processes 1; events { #每一个worker进程能并发处理（发起）的最大连接数 worker_connections 2048; } http { #开启高效文件传输模式 sendfile on; #长连接超时时间，单位是秒 keepalive_timeout 65; #用于指定响应客户端的超时时间 send_timeout 30; #允许客户端请求的最大单文件字节数。 client_max_body_size 100m; #缓冲区代理缓冲用户端请求的最大字节数 client_body_buffer_size 128k; #导入外部配置文件 文件扩展名与文件类型映射表 include mime.types; #让浏览器认为响应是普通的文件流，并提示用户下载文件 如 图片 pdf等 default_type application/octet-stream; charset utf-8; tcp_nopush on; gzip on; #压缩最小文件阀值 gzip_min_length 1k; #缓冲区大小 gzip_buffers 4 16k; #http协议版本 gzip_http_version 1.0; #IE版本1-6不支持gzip压缩，关闭 gzip_disable 'MSIE[1-6].'; #压缩级别 gzip_comp_level 6; #需要压缩的文件格式 gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif; #告知客户端能否缓存 gzip_vary on; #反向代理时使用 gzip_proxied off; #负载均衡 upstream zwz { server 127.0.0.1:8081 weight=1; } server { listen 8080 ssl; server_name localhost; # server_name artskyhome.com; client_max_body_size 100m; # 设置解决大json返回不完整问题 proxy_buffers 16 1024k; proxy_buffer_size 1024k; #保留代理之前的真实客户端ip proxy_set_header X-Real-IP $remote_addr; #在多级代理的情况下，记录每次代理之前的客户端真实ip proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; ssl_certificate ssl/1.pem; ssl_certificate_key ssl/1.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; charset utf-8; location / { root html; index index.html index.htm; add_header 'Access-Control-Allow-Origin' '*'; } location /zwz { proxy_pass http://zwz; } error_page 404 /404.html; } }
接着将 2.2.2 步骤生成的 dist 文件夹内容复制到 nginx 的 html 目录下，如下图所示。
2.2.4 Nginx 发布
将上一步完整的 nginx 文件夹复制到服务器的硬盘上，如下图所示。
运行 cmd，输入以下命令，如下图所示。
cd 项目目录 start nginx
接着就可以在云服务器上看到部署的 Vue 项目了哦！也就是将 Vue 项目转换为了网址。
如果你没有云服务器，也可以在电脑本地运行，执行以下cmd 命令。
cd C:\java\git\template\nginx start nginx
接着打开 localhost:8080 就可以了，如下图所示。
也就是将 Vue 项目转换为了 localhost:8080 这个网址。
三、总结
本文讲解了如何将一个 Vue 项目打包为桌面客户端，实现像 Excel 一样双击运行，适用于管理较多项目且经常忘记网址的场景。本文还讲解了 Vue 项目从下载依赖、打包和 Nginx 部署的全过程，可以给 Vue 初学者参考学习。
