重读vue电商网站53之项目上线

简介: 重读vue电商网站53之项目上线

通过 node 创建 web 服务器。

开启 gzip 配置。

配置 https 服务。

使用 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 执行,初始化包管理配置文件。

图片.png

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


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

图片.png

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

图片.png

开启 gzip 配置


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

图片.png

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



相关文章
|
7天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
39 11
|
6天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
24 10
|
6天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
24 9
|
6天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
21 7
|
4天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
5天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
15 3
|
5天前
|
JavaScript
vue学习(10)事件修饰符
vue学习(10)事件修饰符
18 3
|
6天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
5天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
16 2
|
5天前
|
JavaScript
vue学习(11)键盘事件
vue学习(11)键盘事件
15 2