獲取“[Vue 警告]：無法掛載組件：未定義模板或渲染函數。” 嘗試在沒有 .vue 的情況下導入時

Question

我有一個問題，我無法在不附加 .vue 的情況下從 vue 文件導入組件

我的項目是一個帶有打字稿和基於類的設置的 vue 項目。 我將腳本和模板文件分開（.ts 和 .vue 文件）

example: import DashboardCard from "@/components/dashboard_card/DashboardCard";

當我導入沒有 .vue 的組件時

[Vue warn]: Failed to mount component: template or render function not defined.

當我使用 .vue 包含所有組件時，此錯誤消失了。 現在，當我開始一個新項目時，這不會成為問題，但現在它發生在一個已經存在的龐大項目中。 我認為這與解析擴展（vue.config.js - 解析 [.vue]）有關。我很難了解 vue.config.js 和 webpack.config.js 之間的差異。

我的 vue.config.js 看起來像這樣：

module.exports = {
  transpileDependencies: [
    "vuex-module-decorators",
  ],
  chainWebpack: config => {
    config.module
        .rule('po')
        .test(/\.vue$/)
        .use('vue')
        .loader('vue-loader')
        .options({
          esModule: false,
        })
  }
}

我的 babel.config.js 看起來像這樣：

module.exports = {
  presets: [
    '@vue/app'
  ]
}

我的 tsconfig.json 看起來像這樣：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictPropertyInitialization": true,
    "allowSyntheticDefaultImports": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "mocha",
      "node",
      "chai"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": ["./src/shims-vue.d.ts"]
}

我的 package.json 看起來像這樣

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve:mock": "cross-env VUE_APP_API_URL=http://localhost:3000/ vue-cli-service serve",
    "mock": "ts-node --project ./tsconfig.mock.json ./src/mock/server",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lint:fix": "npx tslint ./src/**/*.ts ./tests/**/*.ts ./src/**/*.tsx ./tests/**/*.tsx --fix",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit",
    "test": "npm run test:unit && npm run test:e2e"
  },
  "dependencies": {
    "@types/chart.js": "^2.9.16",
    "@websanova/vue-auth": "^2.21.14-beta",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "camelcase-keys": "^5.0.0",
    "chart.js": "^2.7.3",
    "color": "^3.1.0",
    "core-js": "^3.6.4",
    "cross-env": "^7.0.2",
    "csv-kit": "^1.0.21",
    "element-ui": "^2.4.5",
    "file-saver": "^2.0.1",
    "js-cookie": "^2.2.0",
    "jsdom": "^13.0.0",
    "json-server": "^0.16.1",
    "lodash.isequal": "^4.5.0",
    "lodash.snakecase": "^4.1.1",
    "mark.js": "^8.11.1",
    "moment": "^2.24.0",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "papaparse": "^4.6.3",
    "path-to-regexp": "^2.4.0",
    "register-service-worker": "^1.7.1",
    "ts-node": "^8.8.1",
    "vue": "^2.5.17",
    "vue-axios": "^2.1.4",
    "vue-chartjs": "^3.5.0",
    "vue-class-component": "^6.0.0",
    "vue-echarts": "^4.0.1",
    "vue-i18n": "^8.15.6",
    "vue-i18n-plugin": "^0.2.2",
    "vue-loader": "^15.9.1",
    "vue-password-strength-meter": "^1.4.2",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vue-svgicon": "^3.2.1",
    "vue2-collapse": "^1.0.15",
    "vuex": "^3.0.1",
    "vuex-module-decorators": "^0.9.9",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
    "@storybook/addon-actions": "^5.3.0",
    "@storybook/addon-links": "^5.3.0",
    "@storybook/addons": "^5.3.0",
    "@storybook/vue": "^5.3.0",
    "@types/chai": "^4.2.11",
    "@types/chai-as-promised": "^7.1.0",
    "@types/file-saver": "^2.0.0",
    "@types/js-cookie": "^2.2.0",
    "@types/json-server": "^0.14.0",
    "@types/mark.js": "^8.11.3",
    "@types/mocha": "^5.2.4",
    "@types/node": "^10.12.12",
    "@types/nprogress": "0.0.29",
    "@types/sinon-chai": "^3.2.1",
    "@types/webpack-env": "^1.13.6",
    "@vue/cli-plugin-babel": "^4.2.3",
    "@vue/cli-plugin-eslint": "^4.2.3",
    "@vue/cli-plugin-e2e-nightwatch": "^3.3.0",
    "@vue/cli-plugin-pwa": "^3.0.5",
    "@vue/cli-plugin-typescript": "^4.2.3",
    "@vue/cli-plugin-vuex": "^4.2.3",
    "@vue/cli-service": "^4.2.3",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/eslint-config-prettier": "^5.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "babel-loader": "^8.1.0",
    "babel-preset-vue": "^2.0.2",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-vue": "^5.0.0",
    "file-loader": "^5.0.2",
    "node-sass": "^4.13.0",
    "prettier": "^1.18.2",
    "sass-loader": "^8.0.2",
    "typescript": "^3.0.0",
    "vue-svg-loader": "^0.12.0",
    "vue-template-compiler": "^2.5.17"
  }
}

我會很感激我如何解決這個問題的每一個提示。

Answer 1

您是否正在嘗試升級？ 如果您想繼續省略 dot-vue 擴展，您可能需要回滾您的cli-plugin-typescript版本（但我非常懷疑這是一個好主意）。 在 v4 之后似乎發生了重大變化，您現在必須提供它。 更多信息：

• https://cli.vuejs.org/migrating-from-v3/#vue-cli-plugin-typescript
• https://github.com/vuejs/vue-cli/pull/3909