Vue本机始终执行App.js而不是.vue

Question

我进行了vue-native的安装的第一个过程，我遵循的是“入门” Hello world教程（https://vue-native.io/getting-started.html），但是从未执行过App.vue，只有{ {1}}。如果删除App.js，则会收到错误消息：

  

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

如何解决此问题以使其正常运行，并在遇到任何问题时遵循本教程？

文件夹结构：

App.js

App.js

App.vue

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',
  },
});

谢谢

Answer 1

尽管答案可能对某些人有用。有另一种方法可以解决此问题而不删除任何文件。 导航到节点模块文件夹。 搜索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);

Answer 2

以下内容对我有用：
首先，您删除app.js，这将给您带来一个错误，但是请不要担心。您将必须运行npm install命令。之后，再次使用npm start

运行vue-native

这将正常运行app.vue文件

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

Answer 4

如果您正在Web浏览器上查看（尚未准备生产），我认为它将按js> json> vue的顺序查找App入口文件。因此，我认为不可能找到App.vue。

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