Vue Router加载Login组件失败，报invalid template option错误求助

使用Vue Router时，Home与About组件可正常加载，但Login组件加载失败，返回错误：[Vue warn]: invalid template option:。

相关代码文件： #

resources/js/components/LoginComponent.vue #

<template>
    <div>
        <h1>login</h1>
    </div>
</template>
<script>
    export default {}
</script>

resources/js/app.js #

import './bootstrap';

import LoginComponent from "./components/LoginComponent.vue";

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/login', component: LoginComponent } // edited
]

const router = VueRouter.createRouter({
    // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
    history: VueRouter.createWebHashHistory(),
    routes, // short for `routes: routes`
})

// 5. Create and mount the root instance.
const app = Vue.createApp({})

app.use(router)

app.mount('#app')

app.blade.php #

<body>
    <div id="app">
            <h1>Hello App!</h1>
            <p>
                <!-- use the router-link component for navigation. -->
                <!-- specify the link by passing the `to` prop. -->
                <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
                <router-link to="/">Go to Home</router-link>
                <router-link to="/about">Go to About</router-link>
                <router-link to="/login">Go to Login</router-link>
            </p>
            <!-- route outlet -->
            <!-- component matched by the route will render here -->
            <router-view></router-view>

问题原因与解决方法 #

问题核心是Vue单文件组件（.vue）未被正确编译：你直接导入了.vue文件，但构建工具（Webpack/Vite等）没有配置对应的解析器，导致LoginComponent不是合法的Vue组件对象，而是未处理的模板源码，从而触发模板选项无效的错误。

1. 快速验证问题

把Login组件改成和Home/About一样的内联模板形式，替换app.js里的导入和路由配置：

// 注释掉原导入
// import LoginComponent from "./components/LoginComponent.vue";

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const Login = { template: '<div><h1>login</h1></div>' }

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/login', component: Login }
]

如果这样能正常加载Login页面，就完全确认是.vue文件编译的问题。

2. 修复构建配置

根据你使用的构建工具，配置对应的Vue单文件组件解析插件：

• Vite项目：
  确保安装@vitejs/plugin-vue，并在vite.config.js中配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()]
  })
  

• Webpack项目：
  安装依赖：vue-loader和@vue/compiler-sfc（Vue3），然后在webpack.config.js中配置：

  const VueLoaderPlugin = require('vue-loader/lib/plugin')
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin()
    ]
  }
  

3. 检查依赖安装

确保已经安装了Vue相关的核心依赖：

# Vue3 + Vite
npm install vue @vitejs/plugin-vue

# Vue3 + Webpack
npm install vue vue-loader @vue/compiler-sfc webpack webpack-cli

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