1. 前言

1. 限于一些原因,比如穷😄哈哈,买不起服务器,但是又想看自己写完项目后的效果,怎么办呢 ,这篇文章帮你实现想法
2. 其实非常简单 就是利用了HbuilderX 打包查看,知道如何做的就不用往下看了
3. 就是通过 把写好的项目转为安卓apk文件 在手机上查看效果,而且不跨域

2. 打包准备工作

1. 不管是自己的vue还是react项目亦或者其他项目
2. 这里以vue项目举例
3. 要理解只有前端浏览器才有跨域,手机app是没有跨域的哦
4. 所以一些会在网页跨域的项目,也可以在手机上自己玩哦,注意一定要合法合规

3. 代码中需要注意的 打包事项 路由模式

• 1. vue路由模式 一定为Hash模式

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history:createWebHashHistory("/#"), 
   routes
}

• 2. history:createWebHashHistory("/#"),

4. baseUrl

1. 注意项目的中代理服务器地址,要在请求里面写全,因为打包后可不走devServer哦
2. 比如 /api换成 let baseUrl = "http://yzs.cn"
3. 具体看自己的 请求封装
4. 如果有在线字体图标, 图标引入地址@font-face中的url前加http
5. 所有的代理服务器 都要写改哦

5. vue.config.js 打包注意事项

1. publicPath : "./"
2. 这就够用了
3. 打包后 默然在项目根目录的 创建dist文件夹
4. 然后可以 运行下 dist下面的 index.html文件 看看有没有界面 或者什么报错,右键以服务器运行就可以

• 扩展

1. 如果想要多配置点东西 比如
2. 打包后的目录配置 outputDir:"yzs",
3. 页面配置出口标题 等可以配置 pages字段
4. 但是这里的配置不是我们 今天的重点,不配置也没事的

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账号完成实名制验证

1.HbuilderX开发工具左下角就可以注册

2. 一定要完成实名制验证
3. 所以的操作按照提示做就行

1. 打开 HbuilderX 创建 5+App项目

2. 界面
   创建项目.png
3. 复制上面 项目打包后的文件 :比如 dist下面 全选复制
4. 粘贴到 刚刚创建的 5+App项目下面 , 直接替换
5. 选择5+App项目下面的文件 ,顶部菜单选择 发行

6. 步骤
   发行.png
7. 选择云打包

8. 打包配置
   1.png
9. 证书选择 公共测试证书
10. 不要勾选iOS

11. 常见错误 比如 通讯录权限某某权限 解决
    1.png
12. 选择 manifest.json文件 取消勾选对应的权限模块
    就行

13. x86勾选
    截图.jpg

14. 打包过程
    打包过程.png
15. 下方控制台会有打包进度,有时候慢,有时候快
16. 打包完成会有绿色的提示, 一般情况下打包后的 安卓apk文件
    在刚才创建的5+App项目的 项目/unpackage/release/apk/文件名.apk
17. 绿色的提示有具体的路径 看下就行
18. 把这个apk文件发送到手机 安装下就可以在手机上玩了

7. 后记

1. 打开开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86
2. manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
3. 打包遇到的问题可以百度

参考资料

manifest.json

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉