vue项目怎么打包成html

好，我们继续来说 vivo 项目打包的问题，这节课呢，咱们要聊的内容呢是代理，那么在开发项目的时候呢，我们都要请求接口，把接口数据呢渲染到页面上，对吧？但是呢，在渲染的这个时候呢，我们请求这 u l 可能会涉及到跨越的问题， 那么跨越问题呢，就要通过代理呢进行解决，但是呢，他是在开发阶段，如果说我们项目打包啊，进入到生产阶段，那这时候呢，代理这的一个路径可能就会出现一些问题， 那么怎么解决这问题也是我们这节课的核心，那这样咱们首先呢先把问题呢还原一下哈，那么在上课之前呢，我已经安装了这个 vivo 脚手架，那么涉及到了一个请求，所以说呢，咱们先安装一下 excels， 然后并且呢把这个接口我们也写一下， 那我之前呢告诉大家过怎么去写这个接口了哈，那我们通过 no 的一个这样的服务就可以了啊， express 是吧？ ms price generator 啊，这么去全局安装一下，然后呢再进入到我们的脚趾架这个目录里边执行这句话哈，那现在我们进入到这个 vivo 脚趾架里边 啊，那么现在呢，它就有了一个 server 的目录哈，我们看一下啊，在这行，那么根据提示，我们需要进入到这 server 里边，然后安装一下项目的依赖项， 安装完依赖项以后呢， n p m staff 就可以启动这个后台这块的一个内容了，我们再让它启动一下。 诶， n p m star， 那当然 run star 也可以。 好，那到这呢，先写一个接口，随便来哈，咱们接口呢简易一点就 ok 了，来来一个 get， 然后这儿是一个 jason， 然后里边呢写一个 a 面儿。 二一就得啊，为了做测试嘛，无所谓。好，我们看一下。哎，等会啊，这个地方呢，我们那个接口写成 list 了 啊，那我们需要访问的是 local hose 三千下的 list。 好，那这时候呢，接口是没有问题的了啊，可以跑得通啊，下面呢就是前端的一系列操作了。 好，刚才呢，我把 excel 呢已经安装了，那么现在呢，我们去配一下那个代理啊，那找一下那个 c l i 的官网啊，因为一会呢，咱还要配置很多东西啊，那么在这呢方便复制 啊，我们找到这个官网，然后需要新建一个 configure 点 g s 啊，当然你是脚手架，三或者四都需要新建，二呢就不需要新建了哈。好，然后呢找到配置参考，里边有一个 dv server。 ok， 我们把 这块呢给拿过去，然后这样呢配置成三千这个端口。好，你就代理过去了。然后呢，正常项目来说呢，呃，我们开发的时候呢，针对 excels 呢，会进行二次封装，那么到这呢，咱也封装一下，只不过呢把这个代码呢可能会写的特别简易，因为我们重点就是， 呃，这个代理哈，那我们这儿就写 atp 了。好，我们把那个 import excel 引进去。嗯，那这儿我们就直接倒数 excels 啊，然后这儿直接 return excels 啊，然后 u i l 就是一个 options 点 u i l。 好，那我们的非常非常简易分装，是吧，就完事。好，然后到这呢，我们去把这个文件引入进来，然后去请求 input， 我写一个 dollar for excels from 哎，这地方是，我们写的是 a p i 对吧？啊，叫 a g p a p i 下的 h t p。 好，那请接口呢，写到 pretty 的中 h t p 点儿多少伏 excels u l 我们请求的是 list 对吧？啊，这儿有一个点儿灯 i s 好把，这呢稍微说一下啊，就是，呃，首先呢，这个 door for excels 呢，我们是一个函数，然后呢，这传过去一个对象， 那这个 options 呢？就是那对象 options 点 u i l 取到就是斜杠 list， 哎，这呢就是斜杠 list。 好了，那么现在呢，我们去把项目呢启动一下， 那这时候呢，我们的接口是肯定没有问题的，可以起球到的哈，来，我们看一下 local host 三千哎， local host 八零八零哈，这是我们的前台啊，这是我们的接口啊，爬呀爬，爬呀爬。 嗯，等他一会。好嘞，嗯，我看一下那控制台，妈吓我一跳，这么大个， 好，大家看到 a 冒号一呢，其实我们是可以看到的，也说可以通过 i s 点对点 a 拿到这个一行，这样呢，我们就不拿了哈，知道这事呢，我们能请求过来就可以了，但是啊，你打包完事以后呢，他能生效吗？哎，可能就够呛了，咱来试一试啊。 首先呢，上节课我们讲过了，打包呢，我们要自测的话，首先要把模式啊给它改成哈西默认的，其次 这个地方的一个路径我们需要改一下。 好，改完这个东西以后呢，现在咱们就去打包 n p m run build 啊，一会呢就喷出来一个 dist 啊，那我们打包完事以后呢，肯定是内容没有问题，对吧，因为我改了是吧，你的这个录音模式也好，还是说你的路径也好是没有问题的，但是你看啊， 这地方呢，首先和后端设置跨域是没什么问题的啊，就是你后端设置跨域也解决不了，原因就是你看你这一挖窑解决是啥呀？对吧？这是不对，那么我们自己测试呢，是测试不出来的，那么这时候该怎么办呢？ 那么其实呢在这个脚脚架里边呢，他这个官网里边啊，他有一个叫模式和黄金变量，大家呢可以把这块呢去看一看。好吧，首先呢要解这个问题的话呢，我们可以通过这方式呢进行解决好，那需要做的事情，我这呢给大家写一下啊，写这个笔记 就有一个，呃，这个模式和环境变量，他分为这么几个，开发环境 和生产环境，然后开发环境下呢，你需要新建一个文件，生产环境呢，当然也需要新建一个文件，就是在我们的项目的根木路啊，好，那我们把这两个文件呢给它新建一下， ok， 然后是这个，那其次呢就是大家可以在比如说一些框架里边儿，若一框架呀，或者说是 view timely 的这样的框架啊，都是可以看到这两个文件的啊，很多朋友不知道这两个文件是干嘛的啊？ 那这个文件呢就是一个开发环境，这个文件呢就是一个生长环境啊，你在里边呢可以写很多内容啊，比如说大家可能常见的像若一里边他有一个标题啊，开头， 比如说你，你叫这个小路线，那你还可以写些，呃，这个模式啊，比如说我们现在模式是开发环境，那我们把这个加上，我就简写 写成第一杯了啊，好，然后再其次呢，还有就是你的请求 u i l， 把请求 u i l 呢可以写成 local host 三千。 好，这样为了证明他是一样的，我这呢打一串一，在这呢，呃，他是一个生长环境，我打一串二， 那么这里边的这个变量你就可以把前面看成一个长量啊，或者看变量都可以啊，那这种模式一般都是一个长量的模式，对吧？那么这个东西啊，你看前面这个名称和这这个名称是一模一样的，只不过他值呢？开发环境是一串二啊。是，哎，这地方写反了， 这是第一位，这是这是我们的环境啊，我把这改成 hr 吧，生产环境是二，开发环境呢是一，那么这里边这个值我怎么拿到呢？啊？比如说我们要到这拿这个值啊，很简单，其实呢在他的一个文档 它里边呢都有这样的体现，我们可以去找一下。大家呢下去可以把这个文档呢去看一看哈，那比如说这个地方是可以拿到的，是吧？使用环境变量看到了吧，我们可以使用它好，比如说我们就使用的是这个 api， 注意这儿 api 和这儿 api 它们的这个前面是一模一样的啊，后面值是不一样的。 好，那么现在我们要去用它的时候，它会自动分别知道你是开发环境还是生产环境。你比如说现在呢？我，呃给它运行的是开发环境 npm 状 siri， 那么它取到就是这串一，不会取到这串二。当我们并的时候呢，它就会取到这串二，不会取到这串一啊，那我们可以测试一下， 大家看是不是一串一啊，对吧？那么你现在呢？去打包来，刚刚看到是一串一啊，那么现在打包你再来试一下啊，这次打包可能就稍微快一点。好， ok， 那现在刷新一下。 好，先不用管 carbox 啊，大家看是不是一串二啊，它是可以自己去区分出来的。 ok， 因为它教学家里边内置了一些这样的配置哈，我们先不管它，那么有了它以后呢，这事就好办了，那具体怎么样去做呢？这样哈，我先把这儿的一个 呃，他这一万元给他弄。对啊，要不然一会咱们去测试时候就全崩了。好，那怎么样弄呢？很简单， 我们只需要在这进行判断对吧？判断你到底是开发环境还是生产环境，然后他运行哪个 url 就可以了 啊，说白了就是刚才我们的代理的情况下，你打包他只是这样生效，对吧？只有一个杠例词啊，其他并没有啊，导致这个问题， 那我们在这个封装里边呢进行判断就可以了啊，当然了，其实很多框架呢，有很多些写法啊，不重要，就是大家要了解至少一种方式啊，你见过这个方式呢就好很多了，你比如说我们的开发环境啊，这个值呢？是 pv 生长环境的这值对吧？是不一样的，那我们在这呢可以判断啊，如果，嗯，放到这个里边儿弄一个电量 a p i u r l 啊，如果说它等于了 d v， 那好了，那一定是一个开发环境，那开发环境情况下呢，它的值就是 options 点 u r， 那么如果说你是一个生长环境呢，你要加上前面那个整体内容啊，要加上那个 local host 就加这个。好，这时候呢我们再去测试啊，把项目呢重启一下，我们首先呢先来看一下开发环境它有没有毛病，其次来看打包完事以后啊，有没有问题是吧，如果都没有问题，这事呢我们就解决了，哎，报了个错哦，等会啊，咱 a p i 这儿没有用 是吧？光变量复直了是吧？结果你这没有用啊，这不扯啊，让他起着吧，咱跑这来刷新，哎，依然没有问题。好，那么现在呢，我们再愉快的去打包到这个生长环境 啊，其实大家你看这是不是他已经提示你生长环境了对不对啊，大家仔细的去看看他运行的每句话呀，反正你也打包着无聊着，慢慢的就发现了很多一些蛛丝马迹对吧？啊， ok， 他就可以了。好，我们再来看这走你 现在你看啊， u i l 是对了，只不过呢因为你的路径这样的啊，后端没有解决跨越，我们把后端解决跨越啊， 后端解跨域呢，有些新兴小伙伴已经看到了，在这呢已经有一大串是吧，把后端那个跨域解决一下来吧，好，就是为了测试他确实来， 老铁没得毛病是吧， 走你。哎呦我去， 走你哎，你看又拿到哎，所以说呢，这样的方案呢就是可以解决这个问题了哈，那就是环境面料哎，一用是吧，你代理爱怎么用怎么用，生产环境也是没有问题的。好，这事呢我们就解决了。那那这节课呢有关于代理这块内容呢，咱们就先说到这里。

那我们来看一下将 v o e 项目打包成 windows 应用里面的 e s e 文件啊，打包之后进行安装的一个插件，我们进行给它处理，看一下如何去打包。首先呢我们第一步需要借助这个 extra 的官方，官方的一个例子去把这个， 嗯进行下载一下，我们来用 get 命令进行下载，我们复制一下。首先呢我们打开一下我们的 get 好，我们来把这个命令复制到这里，然后进行一下执行，然后呢他就会在我们的桌面上面进行下载一个这样的一个插件 哦，这个还是比较快的。然后呢我们把现在我 我们的一个项目进行一下打包，我们打开一下，嗯，一个 v o e u i 我们的一个功能面板，然后现在已经下载完成了，下载完成之后呢，我找一下我的 好，在这里我们来看一下这这样的一个项目结构，然后呢我们对照着自己的文档，对照着自己的文档。第二步进入我们的 v o e 项目进行打包，我们第二步已经在执行了，那第二步也在执行，我们需要 稍微等一下。然后呢第三步我们将打包好的第四文件呢放到我们的下载好的文件夹里面。第四步这些，然后我们直接进入到第六步啊，第六步的话需要一个， 需要一个 n p m 音 store， 我们来执行一下，我们把我们下载好的这个先得进行一下 get 安装，嗯， n p m 音 sto， 我们加一个 c 吧，我们加一个 c 进行一个安装，这样子用我们的国内镜像的话，中国镜像比较快一些。然后我们的这个， 嗯， v o e u i 呢也加载成功了，我们来把它在我们的五个五个浏览器上面打开， 然后我们到到任务里面把自己的项目进行一个打包，一个办的打包。 然后我们现在的这个项目呢是外部的面三，外部的面三现在这里有一个，然后我们进行打包的时候可能就会把这个删除掉，他会自己把这个删掉。来看一下这个打包需要一个过程，然后这个 c npm instar 这一块呢也执行了，执行了之后呢我们来刷新一下，哦，对，嗯，这个是有错误啊，这个是有错误，他没有找到我们这文件，我们呢需要在桌面上面，嗯，进入到这样的一个文件夹啊，我们 cd 过来， cd 过来 啊， cd 过来之后呢我们进行 n p m 烟磁道进行一下安装，然后呢我们来看一下现在这个， 你看一下这个输出，输出这一块呢也没有，也没有报错，也没有问题。我们，嗯把这个这个项目呢，嗯，就这样子先转着，我们来配置这一块，这块 c n p m e s 二的话它这个安装， 嗯，就是我们现在呢，我们我我们现在先把这这第三步、第四步这些呢先跳过去，我们来进行的 是第六步，先把它安装完，安装完之后呢我们再去这个是我们要把自己的项目放到这个里面进行打包，自己的项目，我们先启动一下它本身的一个项目，本身的这个项目是怎么样的，你先看一下。 嗯，这个下载还是变了哦，已经开始下来，这个 node models 已经出来了，已经出来了，然后这 里边的话，嗯，没有动静 好，这边还是比较慢的。好，我们看一下这个，嗯，这个应该差不多了。好了，我们来看一下下面我们应该执行哪个命令器。嗯，然后 set run set， 然后把它呢启动一下， 启动一下，然后我们就可以看到一个他触发的一个项目，他本身一个触发的项目长得是什么样子？ 他已经进行安装了，只是说呢这一块的报错，这一块报错有没有 error， 这个报错现在还，嗯，这个报错现在不用管，因为是用的过中国镜像。嗯 嗯，大家稍微等一下。 嗯，这个也没有， 其实其实这个非常简单，我们只需要把打包好的文件啊，启动自己的项目，这个过了，我们打包好的文件，然后放到我们下载好的那个文件夹里面，放到我们这个 这个里面，这放这个项目里面就可以了。然后放进去之后呢，我们把本本身的这个音带点点 html 呢直接给他删除掉，然后呢进行一个闷点 gs 的一个配置啊，这块修改一下配置， 然后再执行这个命令，然后再把下载过来的，然后我们还需要再下载一个打包的一个包包。下载完了之后呢，第八步我们进行一下配置，然后第九步直接进行打包，打包成 ese 文件就可以了， 其实就是这九步就可以完成这些操作啊。 哦，行，我们这个现在已经进行完成了，已经完成了，我们现在把它触触化。这个项目呢，我们先按一下，嗯，看一下他长什么样子 啊？应该是一个 hello word 这样的一个启动啊。 npm 装一下，然后我们还是回到这里看一下，我们打包好的，如果这个打包慢的话 看一下。哦，这个已经很快了，已经已经快好了，你看我们这里这里进行打包了之后呢，他这块已经出来了已经出来了， 已经出来了一个 hello word， 一个 hello word， 欢迎我们去使用。他粘完一个插件，行，我们就把它关了吧，这个是他本地呢，本地已经处处画好的一个音带点填埋了，我们按 他，我们按照我们自己的这个文档呢来进行一下处理。首先呢我们要把打包好的这个文件放进去，怎么样呢？我们先开始，我们把这个 index 一填完了，先删掉 index， 等下填完了删掉。然后呢在闷点节词里面，闷点节词里面呢我们去改一句话 能进行一下打开。然后呢这里有应该他是有这样一个音带点一添拍的，我们来搜一下啊，现在我们的项目也打包成功了，哎，音带点一添拍的。哦，这样，这个这个呢我们把这一些呢我们复制过来，我们进行一个复制，我们粘到这里粘这里看一下。 好，我们看一下。对，他本来是这个啊，他本来是这个。然后呢我们现在不用了啊，我们把它屏蔽掉，我们把这些屏蔽掉，也就是说我们现在呢我们要放一个 this 目录放进来之后呢就可以了，你现在把它能打包好的一个项目放进来啊， this 我们来进行一下。嗯，再打开，我们把这个目录呢复制进来， 把它 ctrl c 复制一下，然后粘贴到我们当前这个已经。嗯，下载好的这个初始化目录里面，把它放到这个里面去，现在已经放进来。 好，放，放进来我们刷新一下，好，就在这里。我，我们现在配置了，我们把音带删了，然后呢我们把它定义到我们当前这个目录下面去，当前现在或者我们自己的项目里面去，我们来看一下，我们把它其实定义到了这个音带 s t m i 了。 好，这一步也就进行了呢，其实我们从第一步啊开发，然后打包，打包完了之后呢去下载好的把它删掉， index tm 的删， 然后改了 mate d s， 然后这句话也进行了更改，然后这这个 instare 这两句话呢也都执行了，然后呢我们现在再来执行一下这句话，然后再启动一下我们的项目啊，再启动一下，我们再启动一下，来看一下我们打包好的自己的项目长得是什么样。就不是那个 hello word， 因为我们把， 嗯，他这块报的这个 h t m 的呢，没有找到，没有找到这个 h t m 的没有找到，哎，嗯，那我们 那我们就可以把 我们是不是这个文件没有爆穿 再来执行一下， 嗯，行，我们刚才是因为那个文件没有保存啊，那块没有保存，我们现在就可以打开了，我们可以打开自己的这个应用，打开完了之后呢，我们现在， 嗯，就是我们刚才呢犯了一个错误啊，这块这个呢？呃，导入进来之后，我们加了一只这么一个目录的话，他没有保存啊，当时我用这个编辑，他没有保存的话，他是不会生效的。然后呢 我们接下来我们把这个关掉，我们现在要打包成一个，嗯，新的东西，嗯，要打包成一个 esc， 不是雷器动，那么我们就需要执行这一段去安装我们另一个插件， 进行安装之后呢，我们前面呢也加上 c n p m。 嗯，这个安装还是会有 一些时间， 嗯，大家稍微等一下， 然后安装好了之。嗯，之后呢，我们是在下载的目录的 jason 里面去加入我们的这个名两行，加入我们这个名两行，我们来看一下，我们直接现在可以去去加一下 webpack， 点 jason 分配，有点 jason 呢我们，嗯，我们需要加这一句话， 我们来复制一下， 我们把它加了，嗯，刚才把它关了。嗯，这个啊，嗯，加上这一句话， 好，已经安装好了，已经安装好了。我们把那句话夹了之后呢？嗯，这句话呢是我们是现在要打包成一个 window 的啊，三十二尾和六十四尾这样子，它是根据我电脑的一个配置去打包的。 然后呢我们就可以执行当前这句话去生成一个，在我们的这个目录下面， 我们在这个目录下面去生成一个。嗯， windows 的一个 e s e 文件，我们来进行一下执行。好， 嗯，这个就相对来比较快了，我们来刷新一下。嗯，还需要稍微等一下。那第一次打包的话，这个这个打包过程啊，还是相对来说比较慢的，还是比较慢的，需要稍微等一下啊，还是没出来， 嗯，我们来继续回顾一下自己呢，第一步就是下载好这个文件，第二步呢，把自己打包好的文件打包出来，打包出来 diss 啊，然后把文件呢放在下载好的那个我们自己自己的这么一个 文件里面。下载好了之后呢，第第四步呢，把它原本的这个下面的 index t i html 删掉，删掉之后呢有个闷点 gs， 闷点 gs 的话我们进行一个修改，进行一个修改，我们是修改的是这块啊，加了这么一个目录， 因为我们打包好的是直接放进去的，是加了一个目录加进去的，加进去之后呢，第六步的话我们进行一个，嗯，进行了一下 install， 还有一就是一个安装和一个开启一个运行啊， 这个就第七步把下载好的装另一个依赖啊，装这么一个依赖，然后进行打包的是 ese， 然后呢下面呢进进行加了一行配置，加完配置之后呢，我们进行运行了一下进行打包，打包成 ese 五件这样的，我们现在已经打包好了， 打包好了的话我们可以直接，嗯，不在这个，在这个这个下面呢会多一个 app 杠 window 二十三十二位杠一个叉，六十四位这样子，三十二位和六十四位这样的一个文件。把这个文件呢我们直接这样子进行双击打开， 就是我们当前的这个系统了，就是我们当前的这个系统，我们就可以进行一个打开，然后呢我们如果说有一些稍后啊，如果他不想安装的话，我们可以直接把这个这个文件夹发送给我们的客户啊，他就可以直接去打开，这样子 也没有其他的。但是呢如果说大家需要一个安装包，直接就是一个 ese， 然后点击下一步，下一步进行安装的还需要借助另一个插件，然后我们下一节呢去介绍另一个插件，直接把这个文件夹再去打包成为一个 ese， 然后进行发给客户，让客户每一个人都可以安装 可以安装的一个一个软件吧，电脑上面的一个软件，这样子的话会更好一点。这节呢我们就先到这里，好吧？谢谢大家。

好的，各位同学，那么上节课呢，我们安装了一个可说话的一个插件，那个插件呢？大家先暂写的放一边，我们下节课或者后面一课程呢会用到它。 那上节课呢也介绍过了，就是我们要做优化呢，是两个方面，第一呢就是减少这个 dist 这个文件夹整体的一个体积， 然后第二呢就是我们要把里边的 g s 呢进行拆包。好，我们先来到第一个去减少它体积，那目前呢大家可以看到这个体积呢，它是一个九点九 m b， 那它这个文件里边呢会有一个 g s 文件， g s 文件里边呢，大家可以看到有很多，比如说 app g s， 它生成一个 app 点 g s， 同时呢还有一个 map， 那这个 map 文件呢，其实我们的项目在最后测试完没有问题了，打包要上线啊，这个 map 文件呢是不需要的，所以说呢我可以把 map 文件给删除，而且呢这个 map 文件呢是特别大的。好， 那下面呢我就给大家去说一下，我们这样呢是不需要生成这个麦粉键的啊，那我们这呢要把麦粉键也给大家说明一下啊，就是我们要做优化，是啊，别生成啊，那我们这样呢先这么写吧，就是减少啊啊，这个体积 整体的一个体积大小。好，那我们做第一个优化呢，就是啊别生成这个 map 文件。好，我们也说明一下这个 map 文件是干什么的啊？ 这个 map 文件是方便啊，这个代码运行的时候啊，就是我们打包完事运行的时候啊，可以准确 啊输出这个运行的代码啊啊，到底是哪一行出错的，哪一行啊？出现了错误，对吧？那我们已经到了生产阶 断了，所以这个文件呢就没必要了啊，那我们就要给他做一个配置啊，然后把他呢给他消除了。好，那么现在呢，我在这也是， 呃，需要给大家去打开我们那个 vivo configer 哈，这上一课呢，我安装了一个可视化对吧？那现在呢，我先把这先注掉啊，因为目前来说呢，我们是打包，所以说呢不需要去观察他哈，先给他注掉这个地方呢是，呃使用啊，使用我们的可视化啊插件 啊，严格意义上其实是这句话啊，行，我们先标准到这吧。啊，好，那就是不生成啊，卖盆键啊，我们写到这啊， 是我们的生产阶段 资源下的 map， 它为 force 好，这是 wifi 的一配置。好的，那现在呢，我再去打包一下，然后我们看一眼啊，我把这呢这个笔记给大家写一下， 好，把折都给他干掉，好，就留下这一行就可以了，大家知道怎么配置就行了。 好的，那现在呢我们再来看一下我们这个桌面中的一个 demo， 然后这呢又有个 disc 的，对吧？来，大家来看这体积原来是多少啊？啊，我们在没有做这个事情之前呢，原来是九点九，现在是四点六是吧？将近， 呃，一半还要多，对吧？好，那然后呢，我们再看一下这个 g s 文件里边确实没有那个卖粉文件了，对不对？好，那这样的体积呢，我们就减少了一半啊，挺挺恐怖的是吧？啊，当然取决于其实我们这个项目啊，我们这个项目呢，呃，怎么说呢，也不是特别大，所以说看的比较明 明显啊，不管怎么样他是可以减少很多体积的啊，就是你 gs 越大，他的体积呢？减少越明显啊，就这个意思。好的，那这个部分呢，是我们做的第一个优化。好的，那么这一课呢，就先给大家讲到这哈。

好，这个视频呢，我们来说一下 view 项目上线打包的一些优化啊。首先第一种呢，就是禁止生成 map 文件， 我们都知道 vivo 项目他打包的时候呢会生成 wifi 文件，那么它主要呢就是输出一些错误信息，哎，很多情况下咱们用不到这个文件，那就可以禁止掉它，就是在 vivo 点 config， 点 gs 这个文件里面去添加这行代码，就可以进行一个禁止了。 第二种方法呢，就是关掉 prefetch， 它呢是呃，预先加载模块，就是提前获取用户未来可能会访问的内容，那么在首屏呢，会把十几个路由文件都下载下来啊。另外一个就是 prefetch 呢，它不会影响到首页 的加载速度，只是优化子页面，明白吧？那在什么时候去用它呢？就是流量有限制的时候可以使用，比如移动端， 那么那么用户在查看首页的时候并不需要把其他，就是并不看其他页面的时候，我们就可以用到这个禁止 perfect， 那我们可以看一下，可以在 i will config 这个文件里面去呃，删除掉这个 preference 这个插件。 好，第三种呢就是对路由进行揽加载，这个大家应该都很清楚，对吧？ 好，那么第四个呢，就是 element ui 这个组建库呢，我们应该是按需加入。咱们来看右边这一个案例啊，是新创建的一个项目，它这个项目里面呢就只下 下载了一个 element ui， 那我们可以看一下它的启动时间呢，是七秒，对吧？另外呢，这里有它的一个资源哎， 有他的一个资源是八兆模块呢，二点八兆依赖县二点七兆，那对于一个八兆的项目来说呢，还是比较大的啊，就是一个新的 video 项目来说，那 看可以看这个依赖像，这里 element u i 呢，它就占了两兆，它是最大的一个依赖像了，那我们就可以通过按需加载，就是我用的，你再加载，我不用的，你不要进行加载， 明白吧？不然的话，我们可以看到他的这个依赖项过于庞大，会影响到咱们页面的这个咱们项目的这个性能。 ok， 同时呢 我们也可以看一看，嗯，分析，哎，这个分析的话不太这个什么，可以看一下这里解析解析模块，对吧？ 其实这个页面呢，他是告诉了我们，哎，咱们这个项目呢，他用到的依赖项有哪些？他的资源有多少，他的时间呀？嗯，他的大小啊等等，这里呢有一个排名，大家可以 根据这些呃依赖下占用比较大的给他进行对应的一些优化。第五个呢就是使用 cdn 来加载外部资源，比如说我们的 rotor 啊， xs 呀， 对吧？对他们进行 cdn 的一种形式，那主要就是这样去做啊，比如我们 will config 该怎么去进行 cdn， 然后我们页面该怎么进行引入等等。接下来呢，还有就是 gzp 压缩，就是我们把呃代码呢给进行一下压缩。 好，首先呢我们要去下载这个插件啊，来这个使用完之后呢，我们可以通过右边这，这里有一个 g z， 对吧？这样的话这里咱们就可以看到，哎， 通过 gzip 压缩之后呢，咱们的一个占用率，对吧？资源一点八，模块一点九，依赖项一点八，那 相比之前的八兆是不是少了很多呀？对吧？好，接着呢。是图片压缩，依然是用到一些插插件啊，还有就是代码压缩这里呢。呃，就给大家说这么多方法吧， 希望大家，呃，今后的项目在优化的时候可以进行一个参考。那么当然这个页面呢，主要就是这个依赖项，大家可以去试一试，试着去修改修改。好，那这个视频呢？我们就说到这里。

vivo 官网的 vivo 教程是最权威的 vivo 学习资料，如果不是做尤尼亚吧开发，而是只用 vivo 做一去五 app 应用的开发，看 vivo 官网的 vivo 教程就可以了。 然而由内阿坝是跨端开发框架，不是只开发 h 五外的应用。你把微友官方的教程学的很透也不一定有用，因为外边的很多东西阿坝和小程序是不支持的， 所以在 uni app 开发中使用 vivo 还是有些差异的。相比外表平台， vivo 在 uni app 中使用差异主要集中在两个方面，一、 uni app 除了支持 vivo 实力的生命周期， 还支持应用生命周期以及页面生命周期。我们在做由您二宝开发的时候，关注更多的其实是应用生命周期以及页面生命周期，而应用生命周期以及页面生命周期 是原声 app 开发相对传统网易开发来说很重要，也很明显的区别。二、相比 yy 平台在小程序和 app 端部分功能受限， 油泥 app 在发布到一区五时支持所有 vivo 的语法，发布到 app 和小程序时，由于平台限制无法实现全部 vivo 语法，所以不用油泥 app 开发的 vivo 项目不能直接打包为 app 也就不奇怪了。

打开挪动 model 手链夹下的 v u e， 手链夹会有一个 disc 的目录， disc 的目录也就是 v u e， 它打包之后生成了这么多版本， 大家知道这些版本他们的区别吗？今天给大家讲明白。要先学这个知识之前，咱们要先理解一个概念，就是模块化，那么模块化咱们又分什么？分 common gs 的这种，还有 es model 的，还有 umd 的， 这个知识点大家一定要清楚，那么我们学的时候要带着这个问题，比如说这几个 voe 版本都在什么情况下使用，是吧？默认会使用哪个 voe 版本？比如说我用 voeci 创建这个项目，他默认会用哪个版本，如何指定用哪个版本，那么你要学这个之前，那么你还要理解一个概念，就是运行式版本和完整版， 那么运行式版本和完整版，那么它俩最大的一个区别是啥？完整版就类似这样的 viv 一点 g s， viv 一点 com 的 g s， viv 一点 e s m 的 g s， 那么这种就是 完整版，那么完整版就包含了运行式的版本和编译器，那么可以看一下，就是完整版肯定要比这个运行式的版本要大，编译器是干嘛的？比如说像这样，我们如果去使用 voe 的话， 在 uve 里面我们使用 template 呢，去定义这个组件，那么这个时候肯定会用到变异器的，一般呢，我们在项目中开放的时候，都是点 vue 文件，对吧？这里面有 template 模板，像这种情况我们使用运行式版本就可以了。那么我们使用 v 运行式版本的时候，基本上他有一个 veledelood， 就是在这个地方啊， 他内部会欲编一层结实，那么你最终打完包之后，你的 vivo 文件会生成这个点结实文件。所以说像我们这种无忧业项目，他默认都是使用的运行式版本，因为运行式的版本包的体积要小，如果我们要使用这种带编辑的版本呢？那么其实我们在这个他这个里面有个 ctrl 文件， 是吧？那我们可以去配置，在这里面去配置指定他的版本，那么我这个其实就指定的运营式版本，那么在这地方我也可以指定编译式的版本。那么这里还有一个概念，比如说像这种 umd 的版本，我一般什么时候使用？比如他在这个地方， 别说了，就一般都是用这种全局的 sql 的标签性的去进入，就像 come ts 版本这种用的很少了，除非是你的这个版本非常低啊。现在主流的都是用这种 esmode 的版本，他的地方生成的，还有一个带 dld 的后对面，那其实就是生产环境的， 生产环境呢？你可以看一下，就是我们的 voe 的原码里面，那地方一般都有一个判断，来判断他是用于生产环境还是开发环节。咱们可以通过简单这个后面名就可以引发出几个知识点，就是模块化，包括每一个啊，模块化他对应的应用的场景，包括 voe 的运行式版本和他的完整版，他们的区别，使用场景 啊。最后我再给大家留一个问题，他打包之后这个是干嘛的？大家知不知道？如果知道的话可以评论区留言。

一分钟了解 wepad 搭建 view 开发环境首先新建一个空文件夹，在命令行输入 npm mini 一直按回车，完成项目初始化。然后安装项目所需依赖，先安装插件包，再安装各种解析 loader 依赖包， 我们一边安装一边简单了解各个依赖包的作用。想了解 loader 依赖包作用，看上一期，接下来新建项目结构，并文件中添加一些测试内容。 打包配置分别放在 bill 文件夹三个文件中问派 park config g s 打包公共配置 wimp park config def g s 开发环境配置 windpak conflict pull j 生产环境配置 接下来我们在 package 分配置打包命令 deaf 开发环境打包命令 b o 生产环境打包命令在终端运行 in pm run deaf， 我们看下效果。 在终端运行 n p m run build， 在 diss 文件夹打开 index h t m l 我们看下效果。