Blade模板内声明Vue实例时如何正确引入组件并传递后端数据？

核心报错原因 #

你在resources/js/app.js中import的ExampleComponent属于ES模块私有变量，默认仅在app.js的模块作用域内可访问，Blade模板里的内联脚本运行在全局作用域，无法直接拿到这个变量，因此会抛出组件定义无效的错误。

解决步骤（完全匹配你的使用需求） #

1. 调整app.js暴露组件到全局 #

修改resources/js/app.js，把导入的组件挂载到window对象，全局作用域即可访问：

import ExampleComponent from "./components/ExampleComponent.vue";
// 挂载到全局window
window.ExampleComponent = ExampleComponent;

2. 调整Blade模板的脚本顺序和数据赋值 #

• 必须保证编译后的app.js加载顺序早于Vue实例声明的内联脚本
• 数据赋值使用Laravel内置的@json指令，自动处理转义避免语法错误：

<!-- 优先加载编译后的app.js -->
<script src="{{mix('js/app.js')}}"></script>

<div id="app">
    <example-component
    :componentMessage="appMessage"
    ></example-component>
</div>

<script>
    var app = new Vue({
        el: "#app",
        components: {
            'example-component': ExampleComponent,
        },
        data: function() {
            return {
                // 用@json代替直接输出，兼容所有数据类型
                appMessage: @json($message)
            }
        }
    })
</script>

3. 确认Laravel Mix配置支持Vue编译 #

打开项目根目录的webpack.mix.js，确保开启了Vue单文件组件编译能力：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    // 必须添加该行开启Vue编译
    .vue();

如果你坚持使用Vue CDN，需要额外配置排除Vue打包，避免出现两份Vue冲突：

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .webpackConfig({
        externals: {
            vue: 'Vue'
        }
    })

4. 重新编译前端资源 #

执行命令重新编译代码生效：

npm run dev
# 开发阶段可使用 npm run watch 监听文件改动自动编译

内容的提问来源于stack exchange，提问作者Huy Phạm