Vue Native总是执行App.js而不是.vue文件。

Question

我已经进行了vue-native的第一个安装过程，并且正在按照“入门”Hello world教程（https://vue-native.io/getting-started.html）进行操作，但是App.vue从未被执行，只有App.js。如果我删除App.js，就会出现错误：

"无法从“node_modules\expo\AppEntry.js”解析“../../App”"

如何解决这个问题，使其正常工作并遵循教程，没有任何问题？

文件夹结构:

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

App.vue

<template>
  <view class="container">
    <text class="text-color-primary">My Vue Native App</text>
    </view>
</template>

<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: blue;
}
</style>

Thank you

- Bak87

---

如果您能发布更多信息，例如文件夹结构和app.js上的导出语句，那将会很有帮助。从错误来看，它正在寻找一个名为AppEntry.js的js文件？因此，请发布您的文件夹结构以及有关如何安装vue和/或创建应用程序的一些信息 - 比如您是否使用了vue-cli？ - Jaya

我已经编辑了问题，添加了App.js、App.vue和文件夹结构。 - Bak87

抱歉，我有点困惑。你是在使用 vue 还是 react？你是如何连接 vue 的呢？你是否使用了 vue-cli 来创建应用程序？我的意思是，如果按照你的入门文档操作，它能正常工作。 - Jaya

我正在使用Vue，我刚刚在控制台中输入了“vue-native init <project-name>”，然后用“npm start”执行它。 - Bak87

Answer 1

虽然有些回答可能适用于某些情况，但是还有另一种方法可以解决这个问题，而不需要删除任何文件。 导航到 node modules 文件夹。 搜索 expo 文件夹。

打开 AppEntry.js 文件。 它应该看起来像这样:

import 'expo/build/Expo.fx';
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import { activateKeepAwake } from 'expo-keep-awake';

import App from '../../App'; // we will change this!

if (__DEV__) {
  activateKeepAwake();
}

registerRootComponent(App);

将 Appentry.js 修改为以下内容：

import 'expo/build/Expo.fx';
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import { activateKeepAwake } from 'expo-keep-awake';

import App from '../../App.vue'; // Will use App.vue as the entry point

if (__DEV__) {
  activateKeepAwake();
}

registerRootComponent(App);

- Umang Mistry

Answer 2

以下是我成功的做法：
首先，您需要删除app.js文件。这会导致出现错误，但不用担心。接下来，您需要运行npm install命令。然后，使用npm start重新运行vue-native。

这将正常运行app.vue文件。

- Daniel Diaz

---

我有同样的问题，而且这个解决方案没有起作用。 - Alex

无法工作！错误仍然是从/home/abc/coding/learn/vue-native/sample/index.js无法解析模块./App：无法从/home/abc/coding/learn/vue-native/sample/index.js找到模块./App。实际上，这些文件都不存在： - Anoop Thiruonam

Answer 3

我曾经遇到过同样的问题，以下方法对我有效：

在 app.json 中添加以下内容：

"sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"]

放在 "packagerOpts" 内部：

"packagerOpts": { "sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"], "config": "metro.config.js"}

参考链接：https://github.com/GeekyAnts/vue-native-core/issues/117

- user1785961

Answer 4

如果您正在使用非生产就绪的Web浏览器查看，我认为它将按照以下顺序查找应用程序入口文件：js > json > vue。因此，我认为它不可能寻找App.vue。

要在Android手机上查看，请在终端中停止Expo Dev Tools，删除App.js，然后运行npm start order或npm run android。

- user3800030