Vite+Vue3中app.mount('#app')报错：字符串含无效字符求助

核心错误原因 #

你的app.js中创建Vue实例的代码存在两处关键错误，直接导致挂载时触发异常：

1. 根组件配置错误：将render函数错误放置在components对象内部，且render函数尝试渲染Vue实例本身（h(app)），引发循环引用与无效渲染内容。
2. 冗余的组件注册：在根组件内注册组件后又重复全局注册，属于不必要的冗余操作。

修正后的app.js代码 #

import { createApp } from 'vue';
import Lead from './components/Lead.vue';
import Atendimento from './components/Atendimento.vue';

// 根组件仅作为全局组件容器，无需多余配置
const app = createApp({});

// 全局注册组件（需在模板中直接使用时）
app.component('atendimento', Atendimento);
app.component('lead', Lead);

app.mount('#app');

额外说明 #

• 若根组件需要自有模板内容，可修改为：

  const app = createApp({
    template: `
      <div>
        <lead></lead>
        <atendimento></atendimento>
      </div>
    `,
    components: { Lead, Atendimento }
  });
  

  此场景下无需再全局注册组件。
• vite.config.js中的Vue别名配置'vue': 'vue/dist/vue.esm-bundler.js'在Vite+Vue3环境下属于冗余配置，Vite会自动识别并使用正确的Vue构建版本，可移除以避免潜在冲突。
• 确认app.blade.php中的<div id="app">在脚本执行前已渲染到DOM中（Laravel Vite插件默认将脚本放在</body>前，一般无需额外处理）。

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