基于vuecli3的电商项目上云遇到的若干问题及首屏优化方案

电商地址：mistgone.top
github地址:https://github.com/misTgone/GraduateDesigning
项目介绍：参考了github上开源项目"XMall商城"（XMall商城链接）的ui图，我独立设计完成了所有交互和展示层，也就是说源网站的js、html一行代码没抄，只copy了5%不到的css样式代码。

• 项目技术栈：
• 前台（已完成）：基于vue全家桶，极少量BootStrap，大量element-ui
• 后端（已完成）：node（用到了express,cors,mysql,express-session,body-parser等模块）,mysql服务器，nginx代理服务器，LNMP框架，pm2
• 后台管理（待实现）
  项目目前部署于百度BCC云服务器，使用了centos7.4系统，搭载了宝塔运维（方便）
  前提：本地开发环境下代码敲完之后，npm run serve，功能测试都ok。但是~~~~问题来了！！！

问题一：npm run build之后，直接打开dist中的index.html发现白屏！！（小白操作）

解决方法：本地是无法直接查看index.html的，换句话说，npm run build之后生成的dist文件夹中的项目，需要在云服务器才能看到（也就是项目在本地npm run serve后的效果）。为什么要说是云服务器呢，我非要本地看，可以吗？也行，下载一个windows平台的nginx，进行相关配置即可。参考：nginx部署vue项目

问题二：如何把dist部署到云服？

解决方法：

1. 把npm run build后的dist文件上传到云服务器，可在宝塔运维界面直接上传。
   

2. 安装nginx代理服务器，进行相关配置修改，增加一个server即可。可参考问题一中的链接
   

3. 因为项目后端使用到node，需安装pm2，安装相关模块
   
   在项目列表里加入node对应的app.js
   
   此时有坑，安装完相关模块后，需要去到pm2的安装目录下，把安装的node_modules复制到app.js目录下。才可以正常运行

到这一步，直接输入ip地址，应该可以正常访问项目（补充：如果有域名，也可以域名解析ip地址，直接用域名访问）

问题三：首屏加载时间过长

解决方法：通过chrome控制台查看netWork，发现是chunk-vendors.js加载时间过长（主要受限于云服务器的带宽仅为1Mbps）。因此先采取compression-webpack-plugin插件。在项目根目录添加vue.config.js，并加入如下配置，重新npm run build

// 服务器开启Gzip，减小chunk-vendors大小，提升首屏加载速度
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  publicPath: '/',
  configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
    }
  }
}

再在服务器端开启gzip。即在nginx配置http中修改。（宝塔nginx安装时已经默认开启gzip）
结果发现首屏速度仍然有4~5s，重点还是在chunk-vendors.js（加载时间有2 ~ 3s）。因此采用七牛云cdn加速js的方法。把chunk-vendors.js放到七牛云上，复制外链，在dist下的index.html中修改相关href属性值。

最终效果如下图