许小墨のBlog —— 菜鸡博客直通车
系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图!
前端系列文章——传送门
后端系列文章——传送门
我们知道vue项目中有后缀为.vue
的文件,是无法直接运行在浏览器中的。在开发中能在浏览器中打开,是因为vue项目中内置了编译的功能,将整个项目进行编译,然后引入到public的index.html文件中,然后通过服务器打开的。
编译的结果在内存中,并没有保存下来,因为处于开发过程中,所以需要时常进行调试,就不保存在磁盘中了。
当项目完成后,我们就需要将整个项目编译生成文件,才能上传到服务器上进行上线。
vue项目搭建好之后,vue就提供了两个命令:
命令在package.json中
所以在我们项目完成后,就需要使用下面的build命令进行打包:
npm run build
在项目根目录下,会生成一个dist文件夹,用于存放打包后的所有文件
其中的文件结构如下:
最终打包后的项目文件包含:css、js、图片、index.html、网站图标。
我们平常在浏览器上看到的其实就是dist中的index.html,其中的样式是引入css文件夹中的css文件,其中的功能以及我们写的js代码都在js文件夹下的js文件中,项目中用到的静态资源图片,都在img文件夹中。
在我们项目中用到了很多服务器的操作,例如发送请求等,所以dist文件夹中的index.html直接在浏览器中打开是无法正常运行的,我们需要将整个文件夹作为服务器根目录打开才行,例如通过http-server
工具。
打包后的js文件有两个:
引入外部的js代码中,包含我们通过npm下载的vue、vuex、vue-router、axios、swiper等文件。
项目使用的外部代码较多的话,打包后的这个js文件甚至能达到几十MB大小。
为了打包后的js文件体积变小,通常需要进行打包优化。
优化思路:
将外部引入的这些文件,使用cdn的链接来代替,打包时,配置项目不打包这些js文件,从而减小打包后的js文件体积。
具体做法:
配置打包忽略
在vue.config.js文件中,新增键值对:
其中的key,代表我们要忽略打包的模块名称;value代表这个模块在项目中用的是什么名字。
在public下的index.html中引入被忽略的文件的cdn链接
DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %>title>
head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
noscript>
<div id="app">div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js">script>
body>
html>
然后重新进行打包,打包结果:
两相对比,体积小了,且所需时间也短了,dist中的文件还是可以正常运行的。
因为我们做的是移动端app项目,所以最终可以将这个项目打包成手机APP使用。
打包工具使用HBuilder。
打包具体步骤:
在HBuilder中新建一个项目
将新项目中的css、js、img、index.html删除,放入dist下的所有文件
在发行
菜单中选择原生APP-云打包
在打开的菜单中,选择或输入自己的内容:
最后点击打包,等待几分钟,打包成功后,可以从项目的 unpackage\release\apk 文件夹中,找到对应的apk,传递到手机上安装即可使用。
过程简单,但是有一定的前提和注意事项:
不要急着打包,项目中有些代码放在手机APP中无法正常运行,所以需要修改:
手机APP无法使用cookie,需要换成本地存储,所以需要将封装好的cookie.js中的代码改成本地存储的操作
export function setCookie(key, value, seconds, path = '/') {
// var date = new Date()
// date.setTime(date.getTime() - 8*3600*1000 + seconds * 1000)
// document.cookie = key + '='+value+';expires='+date+';path=' + path
localStorage.setItem(key, value)
}
export function getCookie(key) {
// var cookies = document.cookie // 所有cookie == 'key=value; key=value; key=value'
// if(!cookies) return
// var arr = cookies.split('; ')
// for(var a = 0; a < arr.length; a++) {
// var brr = arr[a].split('=')
// if(brr[0] === key) {
// return brr[1]
// }
// }
return localStorage.getItem(key)
}
export function removeCookie(key, path = '/') {
// setCookie(key, null, -1, path)
localStorage.removeItem(key)
}
项目需要用到数据服务器,所以手机和电脑要保持同一个网段(连接同一个路由器的wifi),数据服务器json-server
需要重新制定ip地址启动:
然后修改axios.js中的baseURL:
data.json文件中,有些视屏的链接,少写了协议和冒号,需要补全
打包后的index.html引入静态资源的链接,是以/
开头的,需要在打包前配置,使用./
才能用:
打包的时候,需要有打包的账号和密码
网址:https://dev.dcloud.net.cn/pages/app/list,如果没有账号,需要先注册账号,并实名认证
如果打包提示,通讯录权限问题,需要修改打包权限配置:
打包时选择修改mainfest配置
,
打开配置后,选择权限配置
,
滚动条滚动到通讯配置,取消选中,
然后记得ctrl+s保存。
接下来重新再次打包。
HBuilder打包手机APP是免费的,但一天仅限5次,次数要再多就需要花钱。
本博文缺失大量图片,严重影响内容完整性以及阅读体验,完整内容请前往本人菜鸡博客——许小墨のBlog