Vue路由报错Component is missing template or render function

开发Vue3+vue-router项目时运行抛出如下警告，访问根路径、/create路径时页面渲染异常，排查数小时未定位根因：

app.js:10567 [Vue warn]: Component is missing template or render function. at <CreateProduct onVnodeUnmounted=fn ref=Ref< undefined > > at at at

异常对应截图：

• 根路径异常：
• /create路径异常：

核心是文件导入路径拼写错误，导致路由加载的组件值为undefined，Vue无法找到组件对应的模板或渲染函数，触发警告：

• 路由配置中列表组件导入名与实际文件名不匹配：router.js内导入列表组件写的路径是./components/AllProduct.vue，但实际列表组件文件名为AllProducts.vue，文件名末尾多了一个s，导入不匹配时拿到的值为undefined。
• 入口文件中路由实例导入路径错误：app.js内写的导入路径是./routes，但实际路由配置文件名为router.js，路径错误会导致路由实例加载异常。
• CreateProduct、EditProduct两个组件未在贴出的代码中展示，若存在文件名与导入路径不匹配、组件未正确export default导出、缺少<template>块的问题，也会触发完全相同的报错。

1. 修正router.js内的列表组件导入路径，和实际文件名对齐：

import AllProduct from './components/AllProducts.vue'; // 补全文件名末尾的s
import CreateProduct from './components/CreateProduct.vue';
import EditProduct from './components/EditProduct.vue';

import {createWebHistory, createRouter} from "vue-router";
 
const routes = [
    {
        name: 'home',
        path: '/',
        component: AllProduct
    },
    {
        name: 'create',
        path: '/create',
        component: CreateProduct
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditProduct
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes: routes,
});

export default router;

2. 修正app.js内的路由文件导入路径，和实际路由文件名对齐：

require('./bootstrap');

import { createApp,h } from 'vue';
import router from './router'; // 将原路径'./routes'改为'./router'，匹配实际文件名router.js
import App from './App.vue';
import axios from 'axios'

const app = createApp({ render: () => h(App) });
app.config.globalProperties.$axios = axios;
app.use(router);
app.mount('#app');

3. 检查剩余两个路由组件：
   • 确认CreateProduct.vue、EditProduct.vue的文件名和router.js内写的导入路径完全一致，大小写、后缀都不能有偏差
   • 确认两个文件都包含<template>根块，且script块内有export default {}的组件导出语句
4. 所有修改完成后重启本地开发服务，强制刷新浏览器缓存即可恢复正常。

额外提示：当前AllProducts.vue内写的接口调用是this.axios，但你在全局挂载的是$axios，页面渲染正常后接口请求会报错，记得把组件内的this.axios统一改成this.$axios即可。

ES模块导入时如果路径和实际文件不匹配，导入的变量值会是undefined，vue-router尝试将undefined作为路由组件渲染时，Vue读取不到组件配置上的template模板或者render渲染函数，就会抛出对应警告，页面渲染空白。

内容的提问来源于stack exchange，提问作者NeDiaz