vue项目打包部署实践

以前端的视角记一次bug重重的vue项目打包以及部署到github page上的实践。

vue项目的本地开发

vue项目的开发过程就是大同小异的写组件->拼组件的过程。因为重点在后面对项目的打包+部署上，因此开发过程略（以后补）。

不过，这次的项目，我们是基于iview官网上给出来的推荐（chaokeng）项目模板来进行的开发，这也是后面部署过程bug重重的重要前提。

vue项目的编译和打包

问题初现

vue项目如果想部署到服务器上，需要先将当前开发的项目编译并打包。因此在使用本地开发环境初步完成前端项目开发工作后，我就开始尝试对当前的项目进行编译打包，命令如下:

npm run build

输入命令后编译的进度百分比像飞一样前进，刷刷地从0%到10%、到20%、到30%，马上就要到40%了。

我自信地一笑

然后就报错了

让我们来理解一下这个报错信息：

• 有一个错误出现在打包需要生成的main.xxxxxxxx.js文件
• 具体错误是里面有一个符号没有被识别（unexpected token）
• 符号是一个name类型的东西（？），命名是newData，在这个文件的1.25W行
• 然后告诉你这个错可大可小啊，编译呢我给你中断了，上面编译出来的东西给你留着了

这个报错可以说相当明显了，下一步也很明显要干什么：

寻找解决方案

然后我就Google了一下这个错误【ERROR in xxx.js from UglifyJs】。为什么我不直接先看看代码里面到底是什么错？大概就是lgz老师所说的“要学会基于互联网的自主学习”已经深入我的心里了。

然后找到的解决方案千奇百怪：

• 安装babel-preset-es2015插件 + 修改wekpack.config.js配置文件 （x)
• 降低uglifyjs-wekpack-plugin插件的版本 (x)
• 安装babel插件 + 修改 config配置文件 (x)
• 找到报错的源文件，将es6语法的代码转换成es5语法的代码 (尝试了一下，发现有一点用，具体表现是换了一个地方报错）

总结来说，就是上面的方法都没有解决这个问题。（虽然没有解决我的问题，但是还是mark一下，毕竟马来人）

但是！！！我们基本可以归纳出来这个问题的产生原因：

项目使用的uglifyJs不支持当前的语法（应该是ES6)，因此报错【识别不出的字符】

既然知道了问题所在，那我们就可以开始尝试debug了

尝试Debug

既然知道了可能是uglifyJs的问题，那解决方法就可以按顺序进行了：

• 重启 （x）
• 重新clone和install项目 (x)
• 放弃，让检查的dalao们自己 npm run dev （x)
• 升级uglifyJs (?找不到便捷的方法)
• 联系dalao （√）

于是跟大佬紧急求助，说明了情况，大佬的排查工作也是有条不紊地进行：

• 代码本身有问题 —— 没有，npm run dev能正常运行没有error，而且warning也不影响
• 是不是build的过程中对代码进行了压缩，压缩过程中出错 —— 注释掉config.js中的optimize的语句，依然不行
• dist有没有build成功的文件 —— 有一部分？
• “把代码发给我吧”
• 

大佬出手

大佬一下子就找出根本问题所在:

“项目使用了Webpack2，这个Wekpack版本太低了，里面的uglifyJs还不支持es6，所以会导致识别不了Es6语法然后报错”。

给出了两个解决方法（还顺手把代码不规范的地方找出来了）：

• 去掉会进行代码压缩的语句，把webpack.prod.config.js里面关于UglifyJsPlugin那一段去掉
• 升级项目使用的webpack，参考教程

这就是iview官方推荐的项目模板的天坑了（不知道多久没更新了，用的居然还是Webpack2）

问题解决

大佬给出了解决方案，只要跟着执行就好了。因为DDL的关系选择了第一种更为简单的方法（升级webpack的教程太长了，以后再看）

于是注释掉webpack.prod.config.js中使用UglifyJs插件的代码块

然后重新 npm run build

好..好像成功了？！再次露出我自信的微笑（这不是稳了吗，给大佬递茶）

然后在项目根路径下进行本地端口部署，搞快点(5678是端口号，可以自定义）

python -m http.server 5678

---

console一下报错，发现是找不到资源的404

打开index函数，发现引用的是名字非常正常的文件，并不是刚刚生成的那种main.xxxx.j的文件①

然后看到根文件夹里面刚刚生成了一个Index_prod.html文件，里面引用的是刚刚生成的文件②

大佬同时给出了正解：

应该是python的httpserver默认用index.html作为入口，而build生成的是build_prod.html文件，所以会找不到相应文件。只要把index_prod.html的内容覆盖index.html就可以了。

BINGO！

然后我们就完成了vue项目的本地编译过程

vue项目的github page部署

这个相对之前编译过程来说就顺利多了。我们完成的是将vue项目部署到仓库对应的github page上。

首先，确定github.io仓库的github page是开启的，可以从仓库的【Settings】里面找到【GitHub Pages】这一个选项（多谢后台dalao注册的域名，这也解决了后面的一个坑）

然后我们将刚刚build生成的dist文件夹、资源所在的static文件夹和index_prod.html放到仓库对应的根目录下，并用index_prod.html的内容覆盖掉仓库原有的index.html的内容。然后推上去，github page就会根据仓库的内容自动更新。

第一个坑

推上去之后，输入对应的域名成功加载出了项目的样子，我又露出了自信的笑容

然后拉下来一看，为什么有些图片加载不出来？我不笑了，可以不报错了吗？

打开工作台一看，404。同一个文件夹下只有这两张图片无法加载，排除路径的问题。一看文件名，XXX.JPG。找到问题所在了：

• 在代码中，我们的路径写的是../XXX/XXX/XXX.jpg)。在windows下文件名的大小写是不敏感的，因此能顺利找到；而github的服务器部署在linux环境中，大小写敏感，因此放上去跑，在那个路径只能找到XXX.JPG，找不到XXX.jpg，自然就404了。

顺利解决第一个BUG

第二个坑

既然部署上去了，我们就来用一下。登陆账号，回车没反应？工作台：

这次的报错倒是通俗易懂，就是http和https不能混用。解决方法无非是两种:

• 将api升级成https的，可是我们的服务器部署域名之后出问题了，只能用ip，没有https（后端大佬说）
• 将gitHub Page降级成http，这好像，也做不到？
• 谷歌上说可以使用本地部署的一些转换实现，但过程过于复杂

最后的解决方法：后台大佬将github Page链到一个www.xxx的域名中，就可以正常调用API了（毕竟都是不安全的http）

总结

综上，就完成了一次bug重重的vue项目打包+部署到github Page上面的实践。总结有以下几点：

• 项目模板（无论是vue-cli还是其他），能用新的就用新的（毕竟以前的项目支持水平肯定越低，越容易出现不兼容），init的时候可以在（packet.json）文件看到插件版本
• 出bug了，谨记【重启，网上学习，求助大佬】三连，切忌轻易放弃
• windows环境和linux环境对于大小写的bug很容易导致github仓库更新的问题，可以通过在本地仓库设置大小写敏感来避免
• 常备表情包，这样写博客的时候内容太无聊，至少还有图