Vue native 总是执行 App.js 而不是 .vue答案

【问题标题】：Vue native is always executing App.js instead of .vueVue native 总是执行 App.js 而不是 .vue
【发布时间】：2019-05-17 06:38:35
【问题描述】：

我做了 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>

谢谢

【问题讨论】：

如果您在 app.js 上发布更多信息（例如文件夹结构和导出声明）会有所帮助。从错误中它正在寻找一个名为 AppEntry.js 的 js 文件？所以发布你的文件夹结构和一些关于你如何安装 vue 和/或创建应用程序的信息 - 比如你使用 vue-cli 吗？
我已经编辑了问题，我已经添加了 App.js、App.vue 和文件夹结构。
对不起，我在这里有点困惑。您使用的是vue 还是react？你是怎么连接vue的？您是否使用 vue-cli 创建应用程序，我的意思是这是您的入门文档，并且在遵循它之后，它工作得很好
我用的是Vue，我只是在控制台输入“vue-native init ”，然后用“npm start”执行

标签： javascript vue.js vuejs2 vue-native

【解决方案1】：

以下内容对我有用：
一开始你删除app.js这会给你一个错误，但不要担心。您必须运行npm install 命令。之后，再次使用 npm start 运行 vue-native

这将正常运行 app.vue 文件

【讨论】：

我有同样的问题，这个解决方案不起作用
不工作！错误仍然是 `Unable to resolve module ./App from /home/abc/coding/learn/vue-native/sample/index.js: The module ./App could not be found from /home/abc/coding/learn/vue-native/sample/index.js.事实上，这些文件都不存在：`

【解决方案2】：

有同样的问题。下面对我有用

在 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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：