前端学习(2743):重读vue电商网站53之项目上线

 

  1. 通过 node 创建 web 服务器。
  2. 开启 gzip 配置。
  3. 配置 https 服务。
  4. 使用 pm2 管理应用。

通过 node 创建 web 服务器

创建 node 项目,并安装 express,通过 express 快速创建 web 服务器,将 vue 打包生成的 dist 文件夹,托管为静态资源即可,关键代码如下:

Javascript

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')
})

第一步,先创建一个文件夹,这里命名为 vue_shop_server,然后通过 Code 打开。
新建一个终端,输入 npm init -y 执行,初始化包管理配置文件。


初始化完成后,执行 npm install express -S 安装 express

接下来,将我们 vue 项目通过 build 打包得到的 dist 文件夹复制一份,粘贴到我们的 vue_shop_server文件夹内,然后再新建一个 app.js 入口文件,结构图如下图所示。

测试服务器是否能够运行,新建终端,执行 node .\app.js 命令。如果发现输出了 web server running at http://127.0.0.1 则表示服务已经启动了。

开启 gzip 配置

配置完之前服务之后,我们打开网站后,发现请求网络中文件体积依旧是很大,如下图所示。

使用 gzip 可以减小文件体积,使传输速度更快。

可以通过服务器端使用 Express 做 gzip 压缩。其配置如下:

Javascript

// 安装相应包
npm install compression -S
// 导入包
const compression = require('compression');
// 启用中间件
app.use(compression());

此时的 app.js 文件代码如下所示,注意,一定要把启用中间件放在托管静态资源之前! 不然 gzip 压缩不会生效。

Javascript

const express = require('express')
// 导入包
const compression = require('compression');
// 创建 web 服务器
const app = express()
// 启用中间件
app.use(compression());
// 托管静态资源
app.use(express.static('./dist'))// 启动 web 服务器
app.listen(80, () => {console.log('web server running at http://127.0.0.1')
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414601.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于五个问题的思考

关于当初: 博客A[1]的作者认为:“大学的确提供了非常丰富的能力培养机会和广阔的个人发展空间,但归根结底,学习和进步才是大学的主题,荒废其中任何一个都不能让大学生活过得充实而完整。”我对此有着很深的同感。大学是…

记录请求的耗时(拦截器、过滤器、aspect)

记录请求的耗时(拦截器、过滤器、aspect) 文章前言 记录控制器请求的耗时处理通常有三种实现方式,分别是:过滤器、拦截器、aspect;下文将逐一实现。 1、Filter 过滤器 1.1、方法说明 需要实现 Filter 类,主…

activity与service 使用Handler Messenger数据传递

service 中创建handler /*** 用于接收从客户端传递过来的数据*/ class IncomingHandler extends Handler {Overridepublic void handleMessage(Message msg) {switch (msg.what) {case 6:Log.i("map", "thanks,Service had receiver message from client!"…

前端学习(2744):重读vue电商网站54之配置 HTTPS 服务

为什么要启用 HTTPS 服务? 传统的 HTTP 协议传输的数据都是明文,不安全采用 HTTPS 协议对传输的数据进行了加密处理,可以防止数据被中间人窃取,使用更安全 申请 SSL 证书(https://freessl.org) 进入 http…

A1078. 逆序对个数

问题描述 在一个数列(a1, a2, a3, …, an)中&#xff0c;对于1<i<j<n&#xff0c;如果ai>aj&#xff0c;则称(i,j)是一个逆序对。如在数列(3, 1, 5, 2)中&#xff0c;有(1,2), (1,4), (3,4)共3个逆序对。给定一个数列&#xff0c;求数列中的逆序对的个数。输入格式…

7、Flutter banner_view 轮播图的使用

7、Flutter banner_view 轮播图的使用 1、前言 实现轮播图&#xff0c;效果如下&#xff1a; 2、实现 将采用 banner_view 实现&#xff1a;资源库地址 2.1、yaml 引入依赖 在 pubspec.yaml 声明需要引用的库&#xff0c;执行命令 flutter packages get 进行拉取即可使用。 ba…

Android 人脸实名验证demo——腾讯人脸核身·云智慧眼

可以说比较容易实现&#xff1a;只需要获取BizToken&#xff0c;再起调腾讯SDK即可 1、首先登录腾讯云平台&#xff0c;申请权限&#xff0c;创建应用 腾讯云&#xff1a; https://cloud.tencent.com/ 2、配置应用信息及实名验证流程设置&#xff0c;下载SDK 不过&#xff0c;…

前端学习(2745):重读vue电商网站55之使用 pm2 管理应用

① 在服务器中安装 pm2&#xff1a;npm i pm2 -g ② 启动项目&#xff1a;pm2 start 脚本 --name 自定义名称 ③ 查看运行项目&#xff1a;pm2 ls ④ 重启项目&#xff1a;pm2 restart 自定义名称 ⑤ 停止项目&#xff1a;pm2 stop 自定义名称 ⑥ 删除项目&#xff1a;pm2 dele…

[JSOI 2015] 子集选取

4475: [Jsoi2015]子集选取 Time Limit: 1 Sec Memory Limit: 512 MBSubmit: 363 Solved: 255[Submit][Status][Discuss]Description Input 输入包含一行两个整数N和K&#xff0c;1<N,K<10^9 Output 一行一个整数&#xff0c;表示不同方案数目模1,000,000,007的值。 Sam…

8、D8: Default interface methods are only supported starting with Android N (--min-api 24): void

8、D8: Default interface methods are only supported starting with Android N (--min-api 24): void 1、错误信息 升级完 Android N 后&#xff0c;有些项目运行起来报错信息大致如下&#xff1a; Default interface methods are only supported starting with Android N (…

No field gDefault in class Landroid/app/ActivityManagerNative

启动未注册activity。8.0系统报错如下&#xff1a; 05-06 10:25:31.312 13973-13973/com.bolex.androidhookstartactivity W/System.err: java.lang.NoSuchFieldException: No field gDefault in class Landroid/app/ActivityManagerNative; (declaration of android.app.Acti…

工作242:关于第二个git仓库提交代码

其实第二个仓库 建立的时候直接取进行 push操作就可以完成 原理一样 可以直接对代码地址进行提交

第0周作业2:博客阅读和思考

第0周作业2&#xff1a;博客阅读和思考 拿到题目的第一眼我是抗拒的&#xff0c;因为从大一开始就一直在回答各种关于“你为什么选择这个专业&#xff1f;”&#xff0c;“毕业后有怎样的打算&#xff1f;”&#xff0c;“想找怎样的工作&#xff1f;”这样的问题。可能在自己还…

11、jeecg 笔记之 界面常用整理 - 方便复制粘贴

11、jeecg 笔记之 界面常用整理 - 方便复制粘贴 1、datagrid 操作按钮&#xff08;按钮样式&#xff09; 操作按钮的显示主要依赖于 <t:dgCol title"操作" field"opt" ></t:dgCol> 标签&#xff0c;如果没有该标签&#xff0c;下方即使加入也…

工作243:name报错

name报错就是name的数值报错

Android 图片压缩,Bitmap旋转,bitmap与byte[]之间相互转换,Bitmap与String互转

频繁setImageBitmap引起oom问题解决方法 Glide.with(gsewmimg).load(getCodeBitmap(response.data.skip, R.mipmap.zhifuicon)).into(gsewmimg);压缩前后。图片大小 2.22MB——>200KB 1、图片压缩方法&#xff1a; Bitmap bitmap; byte[] buff; buff Bitmap2Bytes(bitmap…

第八届蓝桥杯-日期问题

标题&#xff1a;日期问题小明正在整理一批历史文献。这些历史文献中出现了很多日期。小明知道这些日期都在1960年1月1日至2059年12月31日。令小明头疼的是&#xff0c;这些日期采用的格式非常不统一&#xff0c;有采用年/月/日的&#xff0c;有采用月/日/年的&#xff0c;还有…

9、Flutter 实现 生成二维码

9、Flutter 实现 生成二维码 1、加入依赖 在 pubspec.yaml 中 dependencies 节点下添加&#xff1a; dependencies: qr_flutter: ^1.1.6 2、引入代码 在需要细线二维码的 dart 类中引入依赖代码包&#xff1a; import package:qr_flutter/qr_flutter.dart; 代码部分 import p…

工作244:根据页面的内容调用

1根据内容接口判断接口数据 2显示不同的内容 3状态管理 <!--首页管理--> <template><div><!--market--><el-card v-if"task1.length!0" style"width: 100%;height: 300px;"><el-carousel :interval"3000"…

Android 换肤demo,轻量快捷接入集成,判断是否夜间模式

true为黑夜模式 //检查当前系统是否已开启暗黑模式 public static boolean getDarkModeStatus(Context context) {int mode context.getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;return mode Configuration.UI_MODE_NIGHT_YES;} 实现…