获取“[Vue 警告]：无法安装组件：未定义模板或渲染函数。”尝试在没有 .vue 的情况下导入时
Posted
技术标签:
【中文标题】获取“[Vue 警告]：无法安装组件：未定义模板或渲染函数。”尝试在没有 .vue 的情况下导入时【英文标题】：Getting "[Vue warn]: Failed to mount component: template or render function not defined." when trying to import without .vue 【发布时间】：2020-07-05 23:45:06 【问题描述】：我有一个问题，我无法从 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"
我会很感激我如何解决这个问题的每一个提示。
【问题讨论】：
【参考方案1】：您要升级吗？如果您想继续省略 dot-vue 扩展，您可能需要回滚您的 cli-plugin-typescript 版本（但我非常怀疑这是一个好主意）。在 v4 之后似乎发生了重大变化，您现在必须提供它。更多信息：
【讨论】：
以上是关于获取“[Vue 警告]：无法安装组件：未定义模板或渲染函数。”尝试在没有 .vue 的情况下导入时的主要内容，如果未能解决你的问题，请参考以下文章