网站建设管理工作经验介绍,邢台网络推广系统找哪家,万能浏览器,如何制作一个微信公众号私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版#xff0c;配图更多#xff0c;CSDN博文图片需要手动上传#xff0c;因此文章配图较少#xff0c;看不懂的可以去菜鸡博客参考一下配图#xff01; 系列文章目录
前端系列文章——传送门 后端系列文章——传送…私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版配图更多CSDN博文图片需要手动上传因此文章配图较少看不懂的可以去菜鸡博客参考一下配图 系列文章目录
前端系列文章——传送门 后端系列文章——传送门 文章目录 私人博客系列文章目录项目打包一、打包介绍二、打包优化三、制作APP注 项目打包
一、打包介绍
我们知道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 langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icolink hrefhttps://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css relstylesheettitle% htmlWebpackPlugin.options.title %/title/headbodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.min.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js/script/body
/html
然后重新进行打包打包结果
两相对比体积小了且所需时间也短了dist中的文件还是可以正常运行的。
三、制作APP
因为我们做的是移动端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;expiresdate;path pathlocalStorage.setItem(key, value)
}export function getCookie(key) {// var cookies document.cookie // 所有cookie keyvalue; keyvalue; keyvalue// 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配置 打开配置后选择权限配置 滚动条滚动到通讯配置取消选中 然后记得ctrls保存。 接下来重新再次打包。
HBuilder打包手机APP是免费的但一天仅限5次次数要再多就需要花钱。 注
本博文缺失大量图片严重影响内容完整性以及阅读体验完整内容请前往本人菜鸡博客——许小墨のBlog
