我有一个现有/正在运行的 SPA 项目,前端使用 VueJS 构建,后端使用 Laravel。
我正在尝试使用 Capacitor 添加 android/ios 应用程序。
当我使用 npm run prod 构建项目时,它不会生成 Capacitor 所需的 index.html。
所以我收到这个错误:
The web assets directory (.\public) must contain an index.html file.
It will be the entry point for the web portion of the Capacitor app.
我的公用文件夹结构:
.
│ .htaccess
│ app.js
│ favicon.ico
│ index.php
│ Logo.png
│ mix-manifest.json
│ robots.txt
│ web.config
├───css
├───images
├───img
└───js
│ app.js
│ app.js.LICENSE.txt
└───resource
即使我搜索所有文件夹,也看不到index.html。
我是不是错过了什么?
nuxt generate
运行
nuxt generate
,这将在单个快照中呈现所有应用程序视图,包括 Capacitor (Android) 所需的 index.html
入口点,以及最终将作为包提交到应用程序商店的内容。
将生成一个
dist
文件夹,您将告诉 Capacitor 使用该文件夹:
capacitor.config.json
{
"appId": "com.MyAppDomain",
"appName": "My Special App",
"webDir": "dist"
}
每当您将更新部署到应用程序的 Android/iOS 版本时,您都可以使用
nuxt generate
并遵循 Capacitor 部署步骤(例如 Capacitor sync
,然后执行相应的 Android 或 iOS 步骤)。
旁注:出于某种原因,Nuxt 文档和终端输出强烈建议您将
target: static
与 nuxt generate
结合使用,但是对于典型的“带有服务器的 Web 应用程序”情况,您可以完全忽略这一点。
对于常规网络应用程序部署(即不是应用程序商店)...
您继续简单地进行远程部署,就像您(大概)已经在做的那样,并且由于您是“带有后端的动态网络应用程序”,因此您永远不需要
nuxt generate
。
对于大多数 Web 应用程序设置,远程应用程序主机(例如 AWS、Heroku 等)将为您运行
build
步骤。例如我在本地使用 Heroku,我只自己运行 build
来:1. 进行最终测试,2. 排除部署错误,3. 优化性能(即减小包大小)。
以另一种方式归结为:在(通用)应用程序的生命周期中,
nuxt build
和nuxt generate
都将根据您尝试部署到的客户端来使用。
从你的文件夹结构来看,我认为你正在运行larvel vue和惯性微风或jetstream脚手架。不幸的是,您无法以这种方式构建电容器项目,因为在“npm run build”或“npm run prod”期间仅生成manifest.json和资产文件夹。但是,如果您仍然想使用电容器创建应用程序,则必须从 iframe 加载您的网站。