Vue未定义报错排查：执行npm命令后仍无法显示VueJS输出

安全阿岳

2026-8-8

Vue "undefined" 问题解决指南

问题概述

执行 npm install、npm install vue、npm run dev 后，页面仍提示 "Vue is undefined"，Vue组件无法正常渲染。

涉及代码

app.js 文件

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('mosque-component', require('./components/MosqueComponent.vue').default);
Vue.component('prayer-component', require('./components/PrayerComponent.vue').default);
Vue.component('time-component', require('./components/TimeComponent.vue').default);

const app = new Vue({
    el: '#content',
});

HTML 引入代码

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="{{ asset('js/app.js') }}" defer></script>
</head>
<body class="footer-offset">
</body>
</html>

错误截图

Vue is undefined 错误

解决方案

添加挂载DOM元素：Vue实例指定挂载到#content，但当前HTML的<body>中无该元素，需补充：
```
<body class="footer-offset">
    <div id="content"></div>
</body>
```
移除defer属性：defer会延迟脚本执行，若页面存在依赖Vue的内联代码，会导致Vue未加载完成就被调用。修改脚本标签：
```
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
```

适配Vue版本：若安装的是Vue 3，原Vue 2的初始化写法已失效，需改为：

import { createApp } from 'vue';
require('./bootstrap');

const app = createApp({});
app.component('mosque-component', require('./components/MosqueComponent.vue').default);
app.component('prayer-component', require('./components/PrayerComponent.vue').default);
app.component('time-component', require('./components/TimeComponent.vue').default);
app.mount('#content');