P352节 vue开发的前端项目，如何进行部署

2.1项目上线相关配置

1.利用node创建web服务器

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

const express = require('express')
//创建web服务器
const app = express()
// 托管静态资源
app.use(express.static('./dist'))

//启动web服务器
app.listen(9999, () => {
    console.log('web server running at http://127.0.0.1:9999')
})

2.部署的详细步骤

新建一个目录为c:\vue_shop_server
在该目录中打开命令行
输入如下的命令

1)npm init -y            #初始化项目目录
2)npm -i express -S      #安装web服务器

将前端项目中生成的dist目录拷贝到vue_shop_server中

在vue_shop_server目录中建立app.js文件。其文件的内容为：

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

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

//启动web服务器
app.listen(9999, () => {
	console.log('web server running at http://127.0.0.1:9999')
})

在命令行中输入node app
在浏览器中输入
http://127.0.0.1:9999

2.配置gzip

若在进行网络传输过程中，相关的文件如果很大时，需要配置gzip，配置相关的步骤如下

使用gzip可以减小文件体积，使传输速度更快

可以通过服务器端使用Express做gzip压缩。其配置如下：

//安装相应包
npm install compression -D

//导入包
const compression = require('compression')

//启用中间件
app.use(compression())

最终app.js文件中的代码为

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

//创建web服务器
const app = express()
//一定要把这一行代码，写到静态资源托管之前
app.use(compression)
// 托管静态资源
app.use(express.static('./dist'))

//启动web服务器
app.listen(9999, () => {
	console.log('web server running at http://127.0.0.1:9999')
})