vue.js - 组件未正确注册，无法编译新文件

问题描述

我刚刚在 v-dialog 中添加了一个名为 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>

包.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 个错误，以及从 10.something 到 12.13.0 的 Node。

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

标签： vue.jsvue-cli

vue.js - 组件未正确注册，无法编译新文件

问题描述

解决方案

推荐阅读