|-原 Capacitor + Vue 高效开发标准流程，利用Capacitor的Live Reload（实时重载） 功能
太棒了！看到模拟器里显示出 "You did it!!!"，说明你的 Live Reload（实时重载） 环境已经彻底打通了。以后修改代码，模拟器会瞬间同步更新，开发效率将大幅提升。
以下是为你整理的 Capacitor + Vue 高效开发标准流程：
第一步：启动前端开发服务（Vite）
这一步是为了让电脑变成一个“本地服务器”，随时准备把最新的网页代码发给模拟器。
在项目根目录打开终端。
关键点：确保 vite.config.js 中配置了 server: { host: '0.0.0.0' }，
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
server: {
host: '0.0.0.0', // 👈 关键！允许外部设备访问
port: 5173 // 可选，确保端口一致
}
})项目根目录下，终端运行命令：npm run dev...
|-原 Capacitor + Vue +Andriod Studio 解决跨域问题
利用Vite 代理
太好了！恭喜登录成功 🎉
## 总结一下最终解决方案
### 1. Vite 代理配置（`vite.config.js`）
```javascript
server: {
host: '0.0.0.0',
port: 5174,
proxy: {
'/api': {
target: 'http://testl13.com',
changeOrigin: true,
secure: false,
},
'/sanctum': {
target: 'http://testl13.com',
changeOrigin: true,
secure: false,
}
}
}
```
### 2. 前端请求用相对路径
```javascript
// 不设置 baseURL
// axios.defaults.baseURL = 'http://testl13.com';
// 不需要 withCredentials（Token 认证）
// axios.defaults.withCredentials = true;
const response = await axios.post('/api/login', formData.value, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
```
### 3. 关键要点
| 问题 | 解决方式 |
|------|---------|
| 网页端 CORS | Laravel CORS 配置 + 清除缓存 |
| Capacitor Android CORS | Vite 代理转发，避免跨域 |
| `Http plugin not implemented` | 不用 Capacitor HTTP 插件，直接用 axios |
| WebView 崩溃 | 清除应用数据，重启模拟器 |
---
## 后续建议
### 生产环境部署
开发环境用代理，**生产环境需要改**：
1. **前端打包后**，Capacitor 的 Origin 变成 `capacitor://localhost`
2. **后端 CORS 配置**要包含：
```php
'allowed_origins' => [
'capacitor://localhost',
'http://localhost',
'http://your-production-domain.com',
],
```
3. **生产环境不用 Vite 代理**，前端直接请求后端域名：
```javascript
axios.defaults.baseURL = 'https://your-production-api.com';
```
### 封装请求工具
建议封装一个 `apiClient`，自动处理 Token：
```javascript
// utils/request.js
import axios from 'axios';
import { Preferences } from '@capacitor/preferences';
const apiClient = axios.create({
headers: {
'Accept': 'application/json', ...
