VUE-CLI项目上线

最新推荐文章于 2022-10-01 21:11:28 发布

原创最新推荐文章于 2022-10-01 21:11:28 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了VUE-CLI项目上线的步骤，包括使用Express创建web服务器、GZIP压缩、HTTPS服务配置及PM2进程管理。通过这些配置，可以有效提升项目部署效率和用户体验。

VUE-CLI项目上线

2.1 项目上线的相关配置 ##

2.1.1 通过node创建web服务器

创建node项目，并安装express，通过express快速创建web服务器，将vue打包的dist文件夹托管为静态资源，关键代码： const express = require('express') //创建web服务器 const app = express()

//托管静态资源 中间件
app.use(express.static('./dist'))

//启动web服务器
app.listen(80, () =>{
    console.log('web server running at http: //127.0.0.1')
})

2.1.2 通过开启 GZIP 压缩

使用gzip压缩可以减小文件的体积，传输速度更快。

通过服务端使用Express做gizp压缩，配置如下：

//安装相应包 npm install compression -D

//导入包 const compression = require('compression');

//启用中间件 app.use(compression());

2.1.3 配置HTTPS服务

传统HTTP协议传输的数据是明文，数据安全性低。

申请 SSL 证书 https://freessl.org 申请流程：

前提：已经购买域名和服务器

1.进入 https：//freessl.cn/官网，输入要申请的域名选择品牌

2.输入自己的邮箱填写信息

3.验证DNS 在域名管理后台添加TXT记录

4.验证通过后，下载SSL证书， full_chain.pem公钥 private.key私钥

在后台项目中导入证书

const https = require('https');

const fs = require('fs');

const options = {
    cert: fs.readFileSync('./full_chain.pem'),
    key: fs.readFileSync('./private.key')   
}

https.createServer(options, app).listen(443);

2.1.4 使用PM2进程管理工具

可以使用pm2来管理node进程，查看node进程状态，支持性能监控，进程守护，负载均衡等功能。

解决问题：当我们关闭后台命令窗口之后，网站失效，不能够被再次打开。

1.在服务器上安装pm2 npm i pm2 -g

2.启动项目 pm2 start 脚本文件 -- name 自定义名称

3.查看运行项目 pm2 ls 自定义名称

4.重启项目 pm2 restart 自定义名称

5.停止项目 pm2 stop 自定义名称

6.删除项目 pm2 delete 自定义名称

7.查看进程/应用的资源消耗情况 pm2 monit

8.pm2 logs