Vue项目build优化以及其中的坑

Vue项目build优化

不得不说，后台程序员看前端真的是知其然不知其所以然（坑比后台还多，哭辽）

1、开启gzip压缩

用vue-cli的孩子都知道有个config下的index.js配置文件，将productionGzip的值改成true就行，当然前提是你得安装一个插件:“compression-webpack-plugin”

2、关闭生成map文件

和1一样几乎同一个位置，将productionSourceMap得值改成false

3、外部CDN引入（有效减少vendor.js文件的体积）

首先有一个网站:https://unpkg.com/

是一个不错的CDN服务器，可以在里面寻找到所需的所有第三方库，我们所要做的就是在index.html文件中通过src的方式将所需的第三方库引入。

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_830376_qzecyukz0s.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.ttf">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!--&lt;!&ndash;  引入组件库&ndash;&gt;-->
    <script src="https://unpkg.com/axios/dist/axios.js"></script>

    <script src="https://unpkg.com/vuex/dist/vuex.js"></script>
    <script src="https://unpkg.com/moment@2.24.0/moment.js"></script>
    <script src="https://unpkg.com/element-ui@2.9.1/lib/index.js"></script>

注意，第三方库名后面的@是指定版本，不加则默认最新版本

然后再将main.js里面还有其他js文件中的对应第三方库的import注释掉，相关的vue的use也注释掉:

最后在build文件夹下的webpack.base.conf.js文件中配置外部引入的external即可:

4、最重要的坑接踵而至

坑一、页面报错vuex未定义

因为我确实是遇到的vuex未定义，其他未定义也可以参考一下，不知道能不能解决。我按照上面3的方法引入后发现vuex找不到，命名都对的情况下，我发现我开始将外部引入的放在了html的底部（因为以前没分离的时候习惯了，都放在下面），于是我将script放在了head标签里面（也就是html的前面），寻思着加载页面会先下载js文件再渲染页面，结果成功，vuex被成功引入

坑二、vue-router未定义

刚开始的时候我再external里面配置的是vue-router:Router的形式，然后new Router（{}）这样子的，但是一直报错Router找不到，找了很久的方法，看到哟润说vue-router中的变量都是VueRouter，然后我将Router全部换成了VueRouter，成功，不知道此种方法有没有道理，但是感觉挺玄乎的，因为个人感觉external配置了vue-router对应Router，Router因该只是个变量名而已，不知道为什么改成VueRouter就生效，真的真的很奇葩。所以说后端程序员来给自己写前端真的是感觉一路从坑走来。