经常忘记网址?将Vue项目一键打包为桌面客户端 十分钟让你解决烦恼(二)

简介: 经常忘记网址?将Vue项目一键打包为桌面客户端 十分钟让你解决烦恼

2.1.3 基于 Vue 的假日旅社管理系统

博客:博客介绍

教学课程:CSDN 学院教学课程

源代码:GitEEGitHubGitCode

2.1.4 基于 Vue 的医院门诊预约挂号系统

博客:博客介绍

源代码:GitEEGitHubGitCode

2.1.5 基于 Vue 的资产出入库管理系统

博客:博客介绍

源代码:GitEEGitHubGitCode

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.pem1.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 文件夹内容复制到 nginxhtml 目录下,如下图所示。

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 初学者参考学习。

相关文章
|
1天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
15 4
|
4天前
|
JavaScript
|
3天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
16 2
|
6天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
21 4
|
6天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
14 1
|
2月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
53 3
|
2月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
2月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
118 0
|
2月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
101 0
Vue3+Vite+TypeScript常用项目模块详解
|
2月前
|
设计模式 JavaScript
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)