Vue 容器中的根模板被清空了,如何解决？

Question

采用构建流程的情况下使用 Vue 时，我们可以在挂载容器中直接书写根组件模板

// index.html
<div id="app">
    ...
    <login />
</div>

// app.js
import {createApp } from "vue";
import login from "./pages/login.vue";
const app = createApp({});
app.component('Login',login);
app.mount("#app");

使用Vite构建后，login组件不能被渲染，如何处理呢？

Answer 1

createApp 的参数传入的是根组件，你穿的是{} ,相当于一个空组件，你这样试试：

import {createApp } from "vue";
import login from "./pages/login.vue";
// 声明根组件
const App = {
    name:'App',
    template:  `<login/>`,
    components:{'login':login},
    data() {
        return {}
    }
}
const app = createApp(App);

app.mount("#app");