肖兴来个人博客✅ 方法一：直接使用 <web-view> 组件加载外部网址
适合直接将已有网站打包成 App，无需改动原网页。
修改 index.vue 为以下代码：
<template> <web-view src="https://你的网站地址.com"></web-view> </template> <script> export default { data() { return {} } } </script> <style> /* 可以清空样式，或设置web-view全屏 */ page { height: 100%; } web-view { width: 100%; height: 100%; } </style>
✅ 方法二：加载本地 HTML 文件
如果你有一个本地打包好的网页（HTML、CSS、JS 文件），可以放在 static 目录下，然后通过 web-view 加载。
假设你的网页入口是 static/www/index.html：
<template> <web-view src="/static/www/index.html"></web-view> </template> <script> export default { data() { return {} } } </script> <style> page, web-view { width: 100%; height: 100%; } </style>
✅ 方法三：使用 manifest.json 配置启动页为网页
你还可以直接在 manifest.json 中配置启动页为网页，这样连 index.vue 都不用写。
在 manifest.json 中添加：
{ "name": "你的App名称", "appid": "", "description": "", "versionName": "1.0.0", "versionCode": "100", "transformPx": false, "app-plus": { "launchwebview": { "id": "1", "url": "https://你的网站地址.com" } } }
✅ 修改后的项目结构建议：
Tiny Talk/ ├── pages/ │ └── index/ │ └── index.vue ← 替换为上述web-view代码 ├── static/ │ └── (可放本地网页文件) ├── unpackage/ ├── App.vue ├── index.html ├── main.js └── manifest.json
✅ 打包步骤：
-
在 HBuilder X 中打开项目
-
修改
index.vue为以上任一代码 -
运行 → 发行 → 原生 App-云打包
-
选择 Android 或 iOS 平台，填写证书信息
-
等待云打包完成，下载安装包
如果只是想快速将网页转为 App，推荐使用 方法一，简单直接，无需改动网页代码。
我测试的案例正常：
<template>
<web-view src=”https://english.98pic.com/”></web-view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
page, web-view {
width: 100%;
height: 100%;
}
</style>
