如何在Laravel 8中安装Vue 3.0？版本不匹配报错求助

Hey there! Let's fix this version mismatch issue step by step—since you're new to Vue, I'll keep this super clear.

First, the core problem: Vue 3 no longer uses vue-template-compiler (that's a Vue 2-only tool). Its dedicated template compiler is @vue/compiler-sfc. Laravel Mix's default setup was pulling in the Vue 2 compiler automatically, causing the conflict you saw.

Here's how to fix it:

1. Uninstall the outdated Vue 2 template compiler #

First, remove the auto-installed vue-template-compiler by running this in your terminal:

npm uninstall vue-template-compiler

2. Install Vue 3's required compiler tool #

Install @vue/compiler-sfc—this is the tool Vue 3 uses to process .vue single-file components:

npm install @vue/compiler-sfc --save-dev

3. Update Laravel Mix's Vue configuration #

Open your project's root webpack.mix.js file, and make sure Mix knows to use Vue 3. Adjust your config like this:

Before (default Vue 2-focused setup): #

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

After (updated for Vue 3): #

mix.js('resources/js/app.js', 'public/js')
   .vue({ version: 3 }) // Add this line to specify Vue 3
   .sass('resources/sass/app.scss', 'public/css');

4. Fix your Vue initialization code (critical!) #

Vue 3's way of creating app instances is totally different from Vue 2. Open resources/js/app.js and replace your old code with the Vue 3 syntax:

Old Vue 2 code (delete this): #

import Vue from 'vue';
import App from './components/App.vue';

new Vue({
    el: '#app',
    render: h => h(App)
});

New Vue 3 code (use this instead): #

import { createApp } from 'vue';
import App from './components/App.vue';

// Create the app instance and mount it to your #app element
createApp(App).mount('#app');

5. Rebuild your project #

Now run the dev command again, and it should work without version errors:

npm run dev

If you still run into issues: #

• Try deleting your node_modules folder and package-lock.json file, then run npm install fresh before running npm run dev.
• Double-check that your Laravel Mix version is 6.x or higher (Laravel 8 comes with this by default, so this shouldn't be an issue).

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