如何将本地Vue项目部署到服务器

11/11/2020 VueWeb

在本地项目已经搭建完成的情况下,如何将项目发布到服务器?并做适当优化

# 一、 通过 node 创建 web 服务器

核心思路

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

//创建web服务器
const app = require("express")();

//托管静态资源
app.use(express.static("./dist"));

//启动web服务器
app.listen(8080, () => {
  console.log("server StartUp: http:127.0.0.1:8080");
});
1
2
3
4
5
6
7
8
9
10

# 1.1 新建一个文件夹,这里我命名为:vue_shop_server,以后该目录即是我们的根目录。

进入该目录,打开终端 使用 npm init -y 初始化项目

# 二、打包项目

找到需要部署到服务器的项目,输入 npm run build,打包项目 打包好之后,把生成的 dist文件夹,复制一份放到我们刚刚新建的vue_shop_server目录下。

首先使用 npm i express -S 安装一个第三方的包 然后在我们的根目录下新建一个app.js文件 ,该文件是我们的项目入口文件。 在该文件中输入下例代码:

//创建web服务器
const app = express();

//托管静态资源
app.use(express.static("./dist"));

//启动web服务器
app.listen(8080, () => {
  console.log("server StartUp: http:127.0.0.1:8080");
});
1
2
3
4
5
6
7
8
9
10

接下来我们可以node .\app.js 运行一下看,能否打印出 server StartUp... 当终端中正常打印的话,则说明我们的服务启动成功,可以前往http:127.0.0.1:8080访问。

# 三、开启 gzip 文件压缩

gzip 概述

HTTP 协议上的 GZIP 编码是一种用来改进 WEB 应用程序性能的技术。大流量的 WEB 站点常常使用 GZIP 压缩技术来让用户感受更快的速度。这一般是指 WWW 服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的 40%.这样传输就快了,效果就是你点击网址后会很快的显示出来

# 3.1 首先安装和导入扩展包

安装:

npm i compression -S

安装完成后,我们需要导入这个包: 在我们的 app.js文件头部加入如下一句代码:

const compression = require("compression");
1

接下来在托管静态资源之前,注册中间件

app.use(compression());
1

在浏览器当中,打开我们的项目,打开开发者选项,找到Network对比一下没有使用 gzip 和 使用 gzip 的效果,可以发现我们的数据大小确实有被压缩。

最后更新于: 2021年9月15日星期三晚上10点43分
Faster Than Light
Andreas Waldetoft / Mia Stegmar