【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里

一图胜千言

Vue工程

下面给出一条可复制粘贴的完整流程 ，从 Node 16.20.2 开始，到最终在浏览器里播放 项目内 mp4 视频 为止。

（macOS / Windows / Linux 通用）

1️⃣ 环境检查

bash 复制代码

node -v    # 应输出 v16.20.2
npm  -v    # 任意 7.x/8.x 均可

2️⃣ 全局安装 Vue CLI（一次性）

bash 复制代码

npm install -g @vue/cli          # 安装最新 Vue CLI
vue --version                    # 确认 ≥ 4.x

3️⃣ 创建 Vue 2 项目

bash 复制代码

vue create vue2-video-demo       # 交互式向导

选择 "Manually select features"
勾选 Router （可选）、Babel
Vue version → 选 2.x
其余保持默认即可

4️⃣ 进入项目 & 启动一次

bash 复制代码

cd vue2-video-demo
npm run serve                    # 默认 http://localhost:8080

浏览器如能出现 Vue 欢迎页，说明脚手架 OK。

5️⃣ 放入视频文件

把准备好的 demo.mp4 放到
public/videos/demo.mp4

（public/ 目录下的文件会被 Webpack 原样复制）

6️⃣ 修改页面播放视频

编辑 src/components/HelloWorld.vue（或新建 src/views/Home.vue）：

vue 复制代码

<template>
  <div class="video-wrap">
    <h2>Vue 2 播放本地 MP4</h2>
    <video
      controls
      preload="auto"
      width="100%"
      style="max-width: 720px"
      src="/videos/demo.mp4"
    ></video>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer'
}
</script>

<style scoped>
.video-wrap {
  text-align: center;
  margin-top: 40px;
}
</style>

7️⃣ 重新启动 & 访问

bash 复制代码

npm run serve

浏览器打开 http://localhost:8080，即可看到可控制的视频播放器。

🔍 常见问题速答

症状	解决
视频加载 404	确认路径 `/videos/demo.mp4` 与 `public/videos/demo.mp4` 对应
跨域报错	本地开发无跨域；如放到线上，把视频放 CDN 或同源目录
移动端播放不了	视频编码用 H.264 + AAC，分辨率 ≤ 1080p

✅ 一句话总结

Vue CLI 一键生成 Vue2 → 视频丢 public/videos → <video> 引用 /videos/xxx.mp4 → 完事！

使用 build 进行构建，然后复制dist发布即可

Android工程

细节不表

几乎都可以，只是注意webView的配置：

粗略配置如下：

java 复制代码

WebView webViewNew=new WebView(parent.getContext());
        webViewNew.setLayoutParams(lp);
         webSettings.setJavaScriptEnabled(true);          // 必须
        webSettings.setAllowFileAccess(true);            // 必须
        webSettings.setAllowContentAccess(true);         // 建议
        parent.addView(webViewNew,index);
        webViewNew.loadUrl(url);
        webView=webViewNew;
        webView.setWebViewClient(new MyWebViewClient());

java 复制代码

 		File webDir = getExternalFilesDir("web");
        File indexHtml = new File(webDir, "/dist/index.html");
        webView.loadUrl(indexHtml.getAbsolutePath());

其他问题

加载index 的html文件路径失败：提示NOT FOUND

这个是相对路径和绝对路径问题，需要处理index.html和app-xxxx.js文件的目录加载结构

方案很多，我个人选择的是适合demo的方案

在工程根目录下vue.config.js里添加这个处理，但这个只是解决了index.html里的目录问题，app.xxxx.js里的目录问题还要再次处理。

javascript 复制代码

module.exports = {
  publicPath: './',   // 关键：所有资源用相对路径
  outputDir: 'dist'
}

另外附一个读取本地资源列表的配置方案

方案 A：构建阶段一次性生成列表（最简单，零后端）

在项目根目录新建 scripts/build-videos.js

// scripts/build-videos.js

javascript 复制代码

const fs   = require('fs');
const path = require('path');

const videoDir = path.join(__dirname, '../public/videos');
const files = fs.readdirSync(videoDir)
                .filter(f => /\.mp4$/i.test(f));

fs.writeFileSync(
  path.join(__dirname, '../src/assets/videos.json'),
  JSON.stringify(files, null, 2)
);

package.json 里加一行脚本

javascript 复制代码

"scripts": {
  "serve": "node scripts/build-videos.js && vue-cli-service serve",
  "build": "node scripts/build-videos.js && vue-cli-service build"
}

前端直接 import

javascript 复制代码

import videoFiles from '@/assets/videos.json';
export default {
  data() {
    return {
      videoList: videoFiles   // ["01.mp4","02.mp4", ...]
    };
  }
};

苹果手机作为热点，电脑ping不通手机的IP地址，手机也访问不了电脑本地web服务

这是 iPhone 个人热点 的"天然限制"------
Apple 故意把热点做成"仅出网 NAT"，禁止客户端互访 ；

因此电脑既 ping 不通手机 IP ，手机也 回不到电脑里的本地服务器 ，属于预期行为，不是配置错误。

🔒 限制表现

场景	结果
Mac → iPhone IP	100 % 丢包（无法 ping 通）
iPhone → Mac 本地 http://192.168.20.x:3000	连接超时
同一 Android 热点	正常互访

✅ 官方说明

Apple 文档明确提及：
个人热点不提供客户端之间的通信，所有流量只被 NAT 到外网。
因此局域网端口转发、ping、局域网广播全部失效。

🛠️ 可行的替代方案

目标	推荐做法
让手机访问电脑本地 Web 服务	电脑不要连 iPhone 热点，改用同一路由器 Wi-Fi ；或者电脑自己开热点（macOS 互联网共享），手机连进来。
调试移动端页面	用 USB 网络共享（macOS 支持）或雷电调试（Safari Web-Inspector）。
临时穿透	用 Cloudflare Tunnel / ngrok / serveo 把电脑服务暴露到公网，手机通过公网地址访问。

🎯 一句话结论

iPhone 热点天生隔离客户端，想互访必须换网络方案（电脑开热点、同一路由器、或公网穿透）。

好用的开发工具

官网地址SmartApi

http://www.smartapi.site/

【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里

一图胜千言

Vue工程

1️⃣ 环境检查

2️⃣ 全局安装 Vue CLI（一次性）

3️⃣ 创建 Vue 2 项目

4️⃣ 进入项目 & 启动一次

5️⃣ 放入视频文件

6️⃣ 修改页面播放视频

7️⃣ 重新启动 & 访问

🔍 常见问题速答

✅ 一句话总结

使用 build 进行构建，然后复制dist发布即可

Android工程

其他问题

加载index 的html文件路径失败：提示NOT FOUND

方案 A：构建阶段一次性生成列表（最简单，零后端）

苹果手机作为热点，电脑ping不通手机的IP地址，手机也访问不了电脑本地web服务

🔒 限制表现

✅ 官方说明

🛠️ 可行的替代方案

🎯 一句话结论

好用的开发工具

推荐理由

官网地址SmartApi

旧版本已停止维护