手机上看前端-vue-react项目效果
1.1. 前言
穷😄哈哈,买不起服务器,但是又想看自己写完项目后的效果,怎么办呢 ,这篇文章帮你实现想法HbuilderX 打包查看,知道如何做的就不用往下看了apk文件 在手机上查看效果,而且不跨域
2. 打包准备工作
vue项目举例跨域,手机app是没有跨域的哦
3. 代码中需要注意的 打包事项 路由模式
Hash模式import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history:createWebHashHistory("/#"),
routes
}
history:createWebHashHistory("/#"),
4. baseUrl
devServer哦/api换成 let baseUrl = "http://yzs.cn"http
5. vue.config.js 打包注意事项
publicPath : "./"dist文件夹
目录配置 outputDir:"yzs",页面配置出口标题 等可以配置 pages字段const {
defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
publicPath: "./",
transpileDependencies: true,
lintOnSave: false,
// 打包之后的路径
outputDir:"yzs",
// 打包的首页
indexPath:"index.html",
pages:{
// 打包之后的页面配置
index:{
// 打包的入口文件
entry:"src/main.js",
// 打包的模板
template:'public/index.html',
// 打包之后的页面
filename:"index.html",
title:" 浏览器的标题"
}
},
devServer: {
// 启用压缩,打包之后代码压缩
// compress:true ,
// port:9000,
// host:"localhost",
open: true,
// hot:true,// 支持热更
proxy: {
'/dyapi': {
target: 'http://open.douyucdn.cn/api/RoomApi',
ws: true, //是否支持websocket
changeOrigin: true,
pathRewrite: {
"^/dyapi": ""
}
}
}
}
})
6. HbuilderX 发布 app
HbuilderX账号完成实名制验证HbuilderX开发工具左下角就可以注册
HbuilderX 创建 5+App项目
界面 复制上面 项目打包后的文件 :比如 dist下面 全选复制粘贴到 刚刚创建的 5+App项目下面 , 直接替换5+App项目下面的文件 ,顶部菜单选择 发行
步骤云打包
打包配置公共测试证书iOS
常见错误 比如 通讯录权限某某权限 解决manifest.json文件 取消勾选对应的权限模块
就行
x86勾选
打包过程apk文件
在刚才创建的5+App项目的 项目/unpackage/release/apk/文件名.apkapk文件发送到手机 安装下就可以在手机上玩了
7. 后记
参考资料
初心
我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了
部落的崛起;共勉







