vue3懒加载 项目打包流程

懒加载

1, 安装图片懒加载模块
	npm install vue3-lazy --save /yarn add vue3-lazy
2, 在main.js入口文件中引入图片懒加载模块
	import VueLazyLoad from 'vue3-lazy'
	createApp(App).use(VueLazyLoad,{
  		loading: require("@/assets/holder.png")
	})
3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可
	<img v-lazy="roomData.room_src" alt="">

项目打包流程

 1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址
  myDouyu/api/RoomApi/game  ==>  http://open.douyucdn.cn/api/RoomApi/game
(如果有在线字体图标, 图标引入地址@font-face中的url前加http)

2, 在vue.config.js中,修改公共路径 publicPath : './'

3, vue2:在路由文件/src/router/index.js 中把路由历史模式注释掉   // mode: 'history'  或改成默认的 hash 模式
   vue3:在路由文件/src/router/index.js 中把路由历史模式改成哈希模式    history:createWebHashHistory("/#")

4, 在终端执行打包 npm run build  ,获得发布包 dist 文件夹 

6, 打开Hbuilder, 新建H5+app项目, 把dist文件夹中的内容拖入替换掉新项目中文件 

7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86

8, 点击Hbuilder菜单栏的 发行=>原生App-云打包  , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项   然后点击下方  打包 按钮 , 开始云打包

9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可