项目上线-项目报告+创建web服务器

一般我们的项目开发完毕以后就需要考虑如何优化，如何将项目部署上线，提供给外界用户使用等的问题。

所有必须要考虑的问题是：优化项目，部署上线项目

项目优化方案：

（1）生成打包报告：通过项目的Vue UI可视化工具生成一个打包的报告，根据报告发现和优化项目，进一步的区解决。
（2）第三方库使用CDN：为第三方库开启CDN（CDN是一种分布式网络）加载，会提高项目首页的加载效率问题。

1，通过使用Vue UI可视化工程生成项目报告，这样我们可以客观的发现问题并且做进一步的解决和处理。

Vue-UI工程化创建项目报告一般有2中方式：

（1）命令行参数的形式生成项目报告

//通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html以帮助分析包内容
vue-cli-service build --report

我们可以手动输入生成项目报告的命令： vue-cli-service build --report ，打包后悔生成一个“report.html”文件，点击打开该文件悔查看打包过程中的问题和情况。

（2）第二种方法是：通过Vue-Ui可视化工具来直接查看项目报告（推荐）。

我们可以vue UI打开可视化面板，可以查看项目的状态

【任务】-【build】编译并压缩模块，点击运行来编译打包该项目，最后会生成一个项目报告，我们在【仪表盘】中可以看到：

面板中通过状态总览可以看到编译的状态，错误、警告，包括项目资源的大小，加载速度，消耗时间以及其中依赖的占比

通过资源面板信息我们可以发现体积排行榜，最大的和最小的文件，加载速度，以及其他的信息，根据这些信息来做处理和优化

通过项目报告可以看出以下问题：

（1）依赖项占整个项目得体积太大
整个项目2.3MB，而光依赖项就有2.2MB，占比92.97%，这是我们需要优化的点，需要将依赖项缩小一些容量。
（2）项目的打开速度比较慢
上面速度统计面板中我们可以看到，项目打开的平均速度为2.68秒，还是比较慢的，起码要在1秒左右或者更块；
（3）项目部分文件过大，打开比较费资源
上面资源面板中我们可以看到第一个已经标了叹号，“js/chunk-vendors.867b03ab.js”这个文件自己就有1.9M，并且访问速度平均1.88秒；太大的资源文件会在加载网页的时候出现“假死”的现象，所以我们也要优化掉；
（4）项目部分非核心依赖所占体积过大
我们通过依赖项面板可以看出部分依赖项目（例如echart、富文本编辑器quill）所占容量比较大。

通过【分析】功能可以看出对应的资源占比率

可以发现越大的文件占的空间页越大，可以很容易的看出来需要优化的资源的文件

通过node创建web服务器

一般我们开发完项目，项目上线都需要准备一些什么呢？
（1）node创建Web服务器。
vue是一个node项目，需要node的容器来托管vue项目，那么需要创建一个服务器容器然后再来承载项目，对外暴露http服务，然后再设置访问ip和端口。
（2）开启gzip配置
即开启文件传输压缩，在网络请求项目的js等一些文件时，返回去除空格、换行等无用内容的js内容，相当于压缩该内容，节省网络资源，加快访问效率；
3、配置https服务。
使用ssl访问来确保我们信息传输过程中的安全。
4、使用pm2管理应用。
使用pm2组件，来管理我们发布的所有的网站应用。

1,通过node来创建web服务器

关键代码如下：

//导入express
const express = require('express')
//创建web服务器
const app = express()
 
//在这里调用express.static()方法， 快速对外提供静态资源
//如果要对外提供多个静态资源目录，重复写更换文件目录即可
app.use(express.static('./dist'))
 
//启动web服务器
app.listen(8088,(req,res)=>{
    console.log('express server running at 访问地址')
 
})