做文章网站汕尾建设网站首页
一图胜千言
Vue工程
下面给出一条可复制粘贴的完整流程，从 Node 16.20.2 开始，到最终在浏览器里播放 项目内 mp4 视频 为止。
（macOS / Windows / Linux 通用）
1️⃣ 环境检查
node -v # 应输出 v16.20.2
npm -v # 任意 7.x/8.x 均可
2️⃣ 全局安装 Vue CLI（一次性）
npm install -g @vue/cli # 安装最新 Vue CLI
vue --version # 确认 ≥ 4.x
3️⃣ 创建 Vue 2 项目
vue create vue2-video-demo # 交互式向导
- 选择 “Manually select features”
- 勾选 Router（可选）、Babel
- Vue version → 选 2.x
- 其余保持默认即可
4️⃣ 进入项目 & 启动一次
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）：
<template><div class="video-wrap"><h2>Vue 2 播放本地 MP4</h2><videocontrolspreload="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️⃣ 重新启动 & 访问
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的配置：
粗略配置如下：
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()); 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里的目录问题还要再次处理。
module.exports = {publicPath: './', // 关键：所有资源用相对路径outputDir: 'dist'
}
另外附一个读取本地资源列表的配置方案
方案 A：构建阶段一次性生成列表（最简单，零后端）
在 项目根目录 新建 scripts/build-videos.js
// scripts/build-videos.js
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 里加一行脚本
"scripts": {"serve": "node scripts/build-videos.js && vue-cli-service serve","build": "node scripts/build-videos.js && vue-cli-service build"
}
前端直接 import
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 热点天生隔离客户端，想互访必须换网络方案（电脑开热点、同一路由器、或公网穿透）。
好用的开发工具
推荐理由
postman在国内使用已经越来越困难：
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
5、postman会导致电脑卡顿，而且使用的功能越多越慢，尤其是win电脑，太让人郁闷了
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi，满足基本日常开发调试api需求
SmartApi
win版本不大于1M；运行消耗性能极低
macos 版本不大于100M；运行消耗性能极低
非常适合开发设备或性能有限的开发环境
SmartApi只为开发服务
官网地址SmartApi
http://www.smartapi.site/
