前端学习(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,一经查实,立即删除!

相关文章

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

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

7、Flutter banner_view 轮播图的使用

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

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

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

[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…

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

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

工作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…

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…

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;} 实现…

Python——使用matplotlib绘制柱状图

Python——使用matplotlib绘制柱状图 1、基本柱状图 首先要安装matplotlib&#xff08;http://matplotlib.org/api/pyplot_api.html#matplotlib.pyplot.plot&#xff09; 可以使用pip命令直接安装[python] view plaincopy # -*- coding: utf-8 -*- import matplotlib.pyplot a…

Android 语音播报,语音识别demo

该功能是基于百度智能云实现的根据文字进行语音播报。 1、首先到百度智能云创建语音应用 https://console.bce.baidu.com/ai/ 填写包名创建百度语音应用&#xff0c;获取AppID&#xff0c;API Key&#xff0c;Secret Key 2、导入资源文件。语音jar&#xff0c;assets语音库&am…

jeecg自定义按钮使用exp属性不起作用

jeecg自定义按钮使用exp属性不起作用 为什么要写这篇文章&#xff1f; 之前写过一篇类似的文章 jeecg笔记之自定义显示按钮exp属性&#xff0c;但是有些小伙伴留言参考后不起作用&#xff0c;当时我的 jeecg 版本为3.7.5&#xff0c;最终以版本不同&#xff0c;暂时搁浅了。今…

使用java修改图片DPI

修改以后可以直接用PS打开看效果 全部使用rt下的类&#xff0c;无需下载其他jar包 import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGEncodeParam; import com.sun.image.codec.jpeg.JPEGImageEncoder; import javax.imageio.ImageIO; …

Android studio 创建kotlin工程

1、安装kotlin插件 打开settings页面。安装插件 2、已安装kotlin插件即可创建kotlin项目 打开New Project。选中Includ Kotlin support即可 3、创建kotlin或者java的activity 选中语音类型kotlin或者java kotlin项目创建完成 kotlin工程demo链接&#xff1a;https://download…

改造一下jeecg中的部门树

改造一下jeecg中的部门树 假装有需求 关于 jeecg 提供的部门树&#xff0c;相信很多小伙伴都已经用过了&#xff0c;今天假装有那么一个需求 "部门树弹窗选择默认展开下级部门"&#xff0c;带着这个需求再次去探索一下吧。 一、改造之前的部门选择树流程 1.1 t:depa…

html 知识

一 html是什么&#xff1f; ,1、超文本标记语言&#xff08;Hypertext Markup Language, HTML&#xff09;是一种用于创建网页的标记语言。 2、本质上是浏览器可识别的规则&#xff0c;我们按照规则写网页&#xff0c;浏览器根据规则渲染我们的网页。对于不同的浏览器&#xff…