如何在 Vue 项目中挂载两个独立的应用程序？

Question

我正在一个 Vue 3 项目中创建一个 frontend 和一个 backend 应用程序。一切正常，除了 app.js 抛出以下错误，具体取决于浏览器中访问的组件。

我你访问app.vue:

[Vue warn]: Failed to mount app: mount target selector "#cms" returned null.

如果您访问 cms.vue:

[Vue warn]: Failed to mount app: mount target selector "#app" returned null.

安装文件app.js如下所示：

require('./bootstrap');

import {createApp} from 'vue';
import app from "../vue/app";
import cms from "../vue/cms";
import router from "./router";

createApp(app)
    .use(router)
    .mount("#app");

createApp(cms)
    .use(router)
    .mount("#cms");

有什么方法可以防止浏览器警告？

Answer 1

您可以在文档中查询这些元素，并且只装载存在的元素：

const appEl = document.querySelector('#app');
if (appEl) {
  createApp(app).use(router).mount(appEl);
}

const cmsEl = document.querySelector('#cms');
if (cmsEl) {
  createApp(cms).use(router).mount(cmsEl);
}

如何在 Vue 项目中挂载两个独立的应用程序？

How to mount two seperate applications inside one Vue project?

vue.js

vue-component

vuejs3