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



相关文章
|
3天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
3天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
12 0
|
2天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
3天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
5 0
|
3天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
5 0
|
3天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
3天前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
3天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
13 0
|
3天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为"/h5/party/pc/",在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题
|
3天前
|
JavaScript 前端开发
iconfont 图标在vue里的使用
iconfont 图标在vue里的使用
15 0