Capacitor找不到index.html（VueJS）

Question

我有一个现有/正在运行的 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。
我是不是错过了什么？

Answer 1

使用

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

都将根据您尝试部署到的客户端来使用。

Answer 2

从你的文件夹结构来看，我认为你正在运行larvel vue和惯性微风或jetstream脚手架。不幸的是，您无法以这种方式构建电容器项目，因为在“npm run build”或“npm run prod”期间仅生成manifest.json和资产文件夹。但是，如果您仍然想使用电容器创建应用程序，则必须从 iframe 加载您的网站。