在Laravel Blade文件中集成Vue.js时遇模块解析错误求助

报错内容 #

"Uncaught TypeError: Failed to resolve module specifier "vue".
Relative references must start with either "/", "./", or "../"

问题本质 #

直接在Blade文件里用原生import语法导入vue包名，浏览器的ES模块系统不支持这种写法——它只能识别以/、./或../开头的相对/绝对路径，没法直接解析npm安装的依赖包名。另外Laravel默认用Vite作为构建工具，所有Vue代码都得通过构建工具处理后才能在浏览器正常运行。

解决步骤 #

1. 把Vue代码移到资源目录的JS文件里 #

不要把Vue代码直接写在Blade里，放到resources/js/app.js中：

// resources/js/app.js
import Vue from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

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

2. 配置Vite支持Vue #

检查项目根目录的vite.config.js，确保已经引入Vue插件（Laravel新项目默认已配置，没配置的话手动加）：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

3. 在Blade中引入构建后的资源 #

用Laravel的@vite指令引入Vite处理后的JS文件，不要自己写带type="module"的script标签：

<!-- 示例Blade文件，比如resources/views/welcome.blade.php -->
<div id="app">
    <example-component></example-component>
</div>

@vite(['resources/js/app.js'])

4. 重新安装依赖并启动服务 #

如果之前依赖有问题，先清理再重装：

rm -rf node_modules package-lock.json
npm install

启动开发服务器：

npm run dev

生产环境部署前要先构建：

npm run build

（备选）如果用的是Laravel Mix（旧版Laravel） #

如果项目还在用Laravel Mix，修改webpack.mix.js：

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .vue();

然后在Blade里引入编译后的文件：

<script src="{{ mix('js/app.js') }}"></script>

注意事项 #

• 别在Blade的<script type="module">里直接导入vue这类包名，必须通过Vite或Mix构建工具处理模块解析。
• Vue版本要和插件匹配：Vue 2对应@vitejs/plugin-vue@^1.9.0，Vue 3用最新版@vitejs/plugin-vue。

内容的提问来源于stack exchange，提问作者Mansoor Qazi