仅在DOM存在#app元素时初始化Vue实例是否为合理开发实践？

架构老林

2026-10-5

问题解答

结论

你提出的先判断DOM中是否存在#app元素再初始化Vue实例的做法是完全合规的合理实践，非常适配你当前的混合技术栈场景。

原因说明

你的项目同时存在两类后端页面：管理员侧的Vue SPA页面、客户侧的Livewire页面，公共入口JS会在两类页面中都加载，加入存在性判断可以完美规避无挂载节点时的Vue告警，符合预期需求
仅当需要时才初始化Vue实例，不会产生无效的性能开销，也不会对Livewire页面的运行逻辑造成任何干扰

现有代码优化建议

你贴出的代码存在两处可调整的小问题：

import Vue from 'vue 缺少结尾引号，修正为 import Vue from 'vue'
重复引入了alpinejs，可以删除其中一次require('alpinejs')语句

修正后的参考代码如下：

// app.js
require('./bootstrap');
require('alpinejs');

import Vue from 'vue'
import router from './router/router';
import csrf from './apis/csrf';
Vue.use(router)

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

// Check if #app in DOM
if (document.getElementById('app') !== null) {
    const app = new Vue({
        el: '#app',
        router
    });
}