1.有几个问题

1.你知道软件的开发流程吗

答:需求获取--需求分析--设计--开发--测试--打包部署--上线

2.为什么要打包

答:前端的html,css,js越来越多,打开一个页面发送http也就变得很多,让后端服务器有很大压力,前端不利于性能优化,所以就要打包。把js合并压缩,css合并压缩,图片转换成img-base64

2.如何打包

在vuecli脚手架中 直接执行npm run build 不就行了吗 确实可以 但是是脚手架帮我们做了一些事情。

执行完npm run build之后会有一个dist目录,这个目录怎么启动滴?

需要通过一个web服务器去运行

安装命令:npm i -g serve

启动命令 serve dist

vue会打包无用的less vuecli打包项目_vue.js

启动完之后 大小会有Gzip的压缩

可以接着上面进行 如果要想子项目打包 先可以删除dist目录 rm -rf dist/

3.子项目打包

什么叫子项目 就是一个网站下面另一个项目网站

https://www.jindu.com/  这是一个网站

https://www.jindu.com/sub 这个是子网站

我们就要自己配置了 创建一个vue.config.js

vue会打包无用的less vuecli打包项目_ios_02

启动命令

serve dist

访问地址是 

http://localhost:3000/sub/

4.多环境打包

有开发,测试,上线测试,上线正式等等。。。环境 每一个环境配置都不一样,比如ip地址 端口不一样。

脚手架中已经内置了两个环境 一个是开发的 一个 是上线的

也有内置变量 process.env.NODE_ENV---脚手架内置变量 判断是上线环境还是开发环境

首先创建文件 .env开头

.env.development 开发环境

.env.production 上线环境

npm run serve ----development 

npm run build ---production

vue会打包无用的less vuecli打包项目_vue.js_03

vue会打包无用的less vuecli打包项目_ios_04

 配置不同环境下需要的aip地址和标题名称

使用方法直接可以打印出

vue会打包无用的less vuecli打包项目_ios_05

打印结果 在开发环境中 npm run serve

vue会打包无用的less vuecli打包项目_前端_06

 打印结果 在上线环境中

npm run build 

serve dist

vue会打包无用的less vuecli打包项目_vue会打包无用的less_07

注意为什么有人打印出来为unidentified

只要修改了webpack相关的东西就得重新打包 npm run serve 才能生效

5.Gzip压缩打包

刚刚我们不是已经Gzip压缩了吗 现在为什么还要Gzip压缩滴。

因为web服务器每次请求都会Gzip压缩,很浪费性能。可以自己直接手动压缩好

在vue.config.js中配置Gzip

vue会打包无用的less vuecli打包项目_ios_08

如果插件版本过高可以降低版本来操作

然后再执行打包命令:npm run build 

vue会打包无用的less vuecli打包项目_ios_09

打包的dist文件中的 js文件里面就会有 .gz文件 ,浏览器访问时有gz文件直接访问

但是打包的文件还是挺大的,因为三方的依赖包在里面可不可以移出去滴 肯定是可以的往下看

6.文件拆分在打包

在打包的文件中第三方依赖包很多内存很大 如 vue axion eleemtui等,

我们可以把第三方包移出去这样文件就小很多了

在vue.config.js中配置

vue会打包无用的less vuecli打包项目_vue.js_10

执行命令你npm run build 可以很清楚的看到小了很多对比用Gzip压缩之后的打包

vue会打包无用的less vuecli打包项目_zip压缩_11

但是这样我们在执行serve dist就不能打开我们打包的项目了,我们我们把依赖都移出去了

就会报错

vue会打包无用的less vuecli打包项目_ios_12

怎么办滴,我们可以直接把vue的包单独的加载进来 去官网介绍 — Vue.js

vue会打包无用的less vuecli打包项目_vue.js_13

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

把这个直接放在pubic文件下的index.html中

(还有axios也没有我们同样也需要导入cdn去官网,axios中文文档|axios中文网 | axios)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

把这个同样的也加入到index.html中

vue会打包无用的less vuecli打包项目_zip压缩_14

在打包 serve dist 启动就可以了

注意免费的cdn可能不稳定,我们可以直接到各个官网中下载好在放到文件夹中 引用

以上就是打包运行在浏览器上,那怎么运行在手机app上滴

7.app打包

也可以把vue工程中的dist打包成webapp,可以用一个工具 HBuilder X

我们要在HBuilder X中创建一个5+app的项目 原生js开发

vue会打包无用的less vuecli打包项目_ios_15

我们可以直接把我们之前dist打包的文件放进来就可以了 直接进行替换 ,在进行打包

vue会打包无用的less vuecli打包项目_前端_16

 里面有第一个manifest.json文件配置 需要获取appID

vue会打包无用的less vuecli打包项目_ios_17

vue会打包无用的less vuecli打包项目_zip压缩_18

 打包完成之后会有一个apk地址 直接下载