Laravel项目安装@vitejs/plugin-vue报依赖冲突错误如何解决

报错由npm peer dependency版本不匹配导致：

• 新安装的Laravel项目默认内置vite@2.9.14，配套的laravel-vite-plugin@0.4.0仅支持vite 2.x版本
• 默认拉取的最新版@vitejs/plugin-vue@3.0.0要求vite版本必须≥3.0.0，和现有依赖版本要求冲突，触发解析失败。

方案1：安装vite2兼容版本的插件（推荐，无需改动Laravel默认依赖） #

直接安装适配vite2的@vitejs/plugin-vue版本即可，执行命令：

npm install @vitejs/plugin-vue@^2.3.3 --save-dev

安装完成后打开项目根目录的vite.config.js，引入vue插件并加入配置项，否则无法识别.vue单文件组件：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// 新增引入vue插件
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(), // 新增注册vue插件
    ],
});

之后调整resources/js/app.js的入口逻辑，正确挂载Vue实例：

import { createApp } from 'vue';
import App from './App.vue'; // 替换为你自己的根组件路径

createApp(App).mount('#app');

配置完成后执行npm run dev即可正常启动开发服务。

方案2：升级全套vite依赖到3.x版本（需使用vite3特性时选择） #

如果要使用vite3及对应3.x版本的vue插件，需要同步升级laravel-vite-plugin到适配vite3的版本，执行命令：

npm install vite@^3.0.0 laravel-vite-plugin@^0.5.0 @vitejs/plugin-vue@^3.0.0 --save-dev

升级完成后按照方案1中的步骤修改vite.config.js配置、调整app.js的Vue挂载逻辑即可正常使用。

注意：不要直接添加--force或--legacy-peer-deps参数强制安装，该操作会跳过依赖版本校验，大概率引发编译失败、热更新失效等运行时异常。

内容的提问来源于stack exchange，提问作者Mishen Thakshana