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””

如何解决此问题以使其正常工作并按照教程处理任何问题？

文件夹结构：

应用程序.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>

谢谢

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

如果您在网络浏览器上查看（尚未准备好生产），我认为它会按 js > json > vue.js 的顺序查找应用程序入口文件。 所以我认为它不可能寻找 App.vue。

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