组件未正确注册，无法编译新文件

Question

我刚刚在v对话框中添加了一个名为AddScan的简单组件，但是我在控制台中得到了它：

[Vue warn]: Unknown custom element: <AddScan> - did you register the component correctly? 
For recursive components, make sure to provide the "name" option.

此外，当我编辑文件并保存时，vue-cli不会编译它，但是当我编辑另一个组件并保存更改时，它会编译但会出现此错误：

warning  in ./src/views/ScanResults.vue?vue&type=script&lang=js&

"export 'AddScan' was not found in '@/components/scan'

这真的是我第一次遇到这个问题，我不知道怎么了。

我使用的是Vue 2.6.10和Vuetify 2.1.7。

ScanResults.vue（父级）：

<template>
  <v-layout row>
    <v-flex row class="justify-space-between ma-5 ">
      <div>
        <v-dialog v-model="dialog" width="500">
          <template v-slot:activator="{ on }">
            <v-btn v-on="on" class="ma-2 lowerCase" color="#E0E0E0">
              Ajouter un scan
            </v-btn>
          </template>

          <AddScan :items="items"></AddScan>
        </v-dialog>
      </div>
    </v-flex>
    <v-flex v-if="items.length < 2">
      <ScanGrid :items="items"></ScanGrid>
    </v-flex>
  </v-layout>
</template>

<script>
import { mapGetters } from "vuex";
import { ScanGrid } from "@/components/scan";
import { AddScan } from "@/components/scan";
export default {
  name: "ScanResults",
  components: {
    ScanGrid,
    AddScan
  },
...

AddScan.vue（子级）：

<template>
  <v-card>
    <v-list>
      <v-list-item v-for="(item, i) in items" :key="i">
        <v-list-item-content>
          <v-list-item-title v-text="item.StorageName"></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "AddScan",
  computed: {
    ...mapGetters(["getIsDarkMode", "getPhysicalInventoryBatch"])
  },
  async created() {
    try {
      await this.$store.dispatch("loadPhysicalInventoryBatch");
      const items = this.$store.getters.getPhysicalInventoryBatch;
      this.$emit("update", items);
    } catch (e) {
      console.error(e);
    }
  },

  data: () => ({
    items: [],
    dialog: false
  })
};
</script>

package.json：

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8084",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "lint:fix": "vue-cli-service lint --fix"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/vue-fontawesome": "^0.1.7",
    "axios": "^0.19.0",
    "core-js": "^3.3.5",
    "material-design-icons-iconfont": "^5.0.1",
    "moment": "^2.24.0",
    "qrcode": "^1.4.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-moment": "^4.0.0",
    "vue-mugen-scroll": "^0.2.6",
    "vue-promised": "^1.2.1",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.7",
    "vuetify-dialog": "^0.3.8",
    "vuex": "^3.0.1",
    "vuex-i18n": "^1.13.1",
    "vuex-persistedstate": "^2.6.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@vue/cli-plugin-babel": "^4.0.5",
    "@vue/cli-plugin-eslint": "^4.0.5",
    "@vue/cli-plugin-pwa": "^4.0.5",
    "@vue/cli-plugin-unit-jest": "^4.0.5",
    "@vue/cli-service": "^4.0.5",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^23.6.0",
    "compression-webpack-plugin": "^3.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.3",
    "lerna": "^3.18.3",
    "sass": "^1.23.1",
    "sass-loader": "^7.3.1",
    "vue-template-compiler": "^2.5.21"
  }
}

vue.config.js：

const CompressionPlugin = require("compression-webpack-plugin");
const path = require("path");
module.exports = {
  outputDir: path.resolve(__dirname, "../PmpTeamMateDeploy/Pmp.Web.Inventory"),
  configureWebpack: {
    plugins: [new CompressionPlugin()],
    devtool: "source-map"
  },
  css: {
    loaderOptions: {
      sass: {
        data: `
            @import "@/assets/style/style.scss"; 
          `
      }
    }
  },
  pwa: {
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js",
      exclude: [/\.map$/, /manifest\.json$/]
    },
    themeColor: "#78a22e"
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach(match => {
      config.module
        .rule("scss")
        .oneOf(match)
        .use("sass-loader")
        .tap(opt =>
          Object.assign(opt, { data: `@import '~@/assets/style/style.scss';` })
        );
    });
  }
};

更新：在组件部分的父组件中，我添加了AddScan：（）=> import（“ @ / components / scan”），摆脱了我遇到的编译错误。保存AddScan文件时仍然无法编译。

我还将vue-cli和所有插件和依赖项从3.12.1更新到4.0.5，将core-js从2.6.10更新到3.3.5，将sass-loader从7.3.1更新到8.0.0，但又恢复到7.3 .1，因为它由于某种原因使我在编译时抛出104个错误，以及Node从10.something到12.13.0。

更新2：基本上，问题似乎在于vue拒绝编译新文件。旧的由于某种原因编译良好。我尝试使用较旧的软件包版本加载分支的旧版本，只是npm install，仍然不会编译新文件。

Answer 1

好吧，我觉得自己是一个令人难以置信的白痴，但是我们去了：该组件位于组件/扫描中，但是由于它是父组件，因此我称之为视图，所以我完全忘记了要在索引中导入/导出它扫描文件夹中的.js文件。

components / scan / index.js：

import ScanGrid from "./ScanGrid";
import ScanAdd from "./ScanAdd";

export { ScanGrid };
export { ScanAdd };