0
点赞
收藏
分享

微信扫一扫

Node+Express+Compression部署Vue项目

背景: 在一个Vue项目开发完成后,经过 yarn build 或者 npm run build 打包文件,此时会在文件夹下生成一个 dist 文件夹,那怎么让这个文件夹运行起来可以预览开发完成的项目呢?在此使用 Node 搭建简易的服务器,将 dist 文件夹托管为静态资源。实现步骤如下。

一、新建文件夹
创建一个新的文件夹,通过 npm init -y 初始化 Node.js 项目,生成的默认的 package.json ,将 dist 文件夹拷贝到当前文件目录下,如下图所示。
在这里插入图片描述
二、安装依赖
1、通过 npm run express 或者 yarn add express 安装 express ,该中间件是 Node 项目运行起来的关键。
2、通过 npm run compression 或者 yarn add compression 安装 compression ,该中间件是启用 Gzip 资源压缩功能的关键。

PS:资源压缩一般是前端打包项目的时候启用 Gzip 压缩,如果是在服务器进行压缩的话会造成性能浪费, compression 在此的作用是当前端请求的时候,返回已经压缩好的 GZ 文件,而不是对请求的文件进行压缩后再返回给前端。关于Vue项目webpack打包如何启用Gzip压缩可以看我另外一篇文章:
Vue项目打包启用图片、JS和CSS文件的Gzip压缩

三、新建app.js文件
新建 app.js 文件作为 Node.js 项目的入口文件,主要代码如下:

const express = require('express');
const compression = require('compression');
const app = express();

// compression的使用写到静态资源托管之前
app.use(compression({ filter: filterCompress }));

function filterCompress(req, res) {
  if (req.headers['x-no-compression']) {
    // 这里就过滤掉了请求头包含'x-no-compression'
    return false;
  }
  return compression.filter(req, res);
}
// 静态资源托管
app.use(express.static('./dist'));

app.listen(8001, () => {
  console.log('server running at http://127.0.0.1:8001');
});

至此,一个简易的服务器搭建完毕,通过 node .\app.js 运行服务,访问 http://127.0.0.1:8001 即可打开开发完成的 Vue 项目。

举报

相关推荐

0 条评论