问题：

给运行中的MERN应用程序添加电容时遇到的问题

席乐童

2023-03-14

我通过修改这个样板创建了一个工作的Mongo/Express/React/Node应用程序。我增加了几个页面，它的工作很好，但我正在尝试添加电容，这样我可以有iOS和Android版本。我按照Capacitor的说明将Capacitor添加到现有的web应用程序中，它构建得很好，但什么也没有发生。如果我在index.html上添加一个带有警告的脚本标记，它就会运行。我认为它没有运行的应用程序内的应用程序正确的服务。这要么意味着我需要让它在电容内部为应用程序提供适当的服务（如果可能的话），要么我需要让它捆绑React应用程序，这样它就可以加载到应用程序内部。

下面是我的capacitor.config.json:

{
  "appId": "com.example.app",
  "appName": "mern-auth-capacitor",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "client/public",
  "cordova": {}
}

下面是client/public/index.html

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="theme-color" content="#000000">
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <title>MERN Auth App</title>
    </head>
    <body>
      <noscript>
        You need to enable JavaScript to run this app.
      </noscript>
      <div id="root"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      <script>alert('index.html')</script>
    </body>
  </html>

下面是client/src/app.js:

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import jwt_decode from "jwt-decode";
import setAuthToken from "./utils/setAuthToken";
import { Plugins } from '@capacitor/core';

import { setCurrentUser, logoutUser } from "./actions/authActions";
import { Provider } from "react-redux";
import store from "./store";

import Navbar from "./components/layout/Navbar";
import Landing from "./components/layout/Landing";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
import Settings from "./components/settings/Settings";
import Feedback from "./components/feedback/Feedback";
import ErrorPage from "./components/error/ErrorPage";
import PrivateRoute from "./components/private-route/PrivateRoute";
import Dashboard from "./components/dashboard/Dashboard";

import "./App.css";
alert('App.js');
const { Device, Modals } = Plugins;

// Check for token to keep user logged in
if (localStorage.jwtToken) {
    // Set auth token header auth
    const token = localStorage.jwtToken;
    setAuthToken(token);
    // Decode token and get user info and exp
    const decoded = jwt_decode(token);
    // Set user and isAuthenticated
    store.dispatch(setCurrentUser(decoded));
    // Check for expired token
    const currentTime = Date.now() / 1000; // to get in milliseconds
    if (decoded.exp < currentTime) {
        // Logout user
        store.dispatch(logoutUser());

        // Redirect to login
        window.location.href = "./login";
    }
}
class App extends Component {
    constructor(props) {
        super(props);
        this.showDeviceInfo = this.showDeviceInfo.bind(this);
    }
    async showDeviceInfo() {
        let info = await Device.getInfo();
        console.log({info});
        await Modals.alert({
            title: 'Info',
            message: `UUID: ${info.uuid};
            Model: ${info.model}`
        });
    }
    render() {
        alert('App.js - render()');
        console.log('--->> in app render!!!');
        return (
            <Provider store={store}>
                <Router>
                    <div className="App">
                        <Navbar />
                        <Switch>
                            <Route exact path="/" component={Landing} />
                            <Route exact path="/register" component={Register} />
                            <Route exact path="/login" component={Login} />
                            <PrivateRoute exact path="/settings" component={Settings} />
                            <PrivateRoute exact path="/dashboard" component={Dashboard} />
                            <PrivateRoute exact path="/feedback" component={Feedback} />
                            <Route component={ErrorPage} />
                        </Switch>
                    </div>
                </Router>
            </Provider>
        );
    }
}
export default App;

司寇望

2023-03-14

我刚在电容器文件里偶然发现了这个。我需要在capacitor.config.json中指定服务器：

{
  "appId": "com.example.app",
  "appName": "mern-auth-capacitor",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "client/public",
  "server": {
    "url": "http://192.168.1.8:3000/",
    "hostname": "localhost"
  },
  "cordova": {}
}

给运行中的MERN应用程序添加电容时遇到的问题

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档