Vue2项目升级Vue3遇依赖及vue-loader配置问题求助

1. 修复Vue依赖与vue-loader配置 #

• 先彻底重新安装Vue 3及适配的vue-loader：

  # 卸载旧版Vue和vue-loader
  npm uninstall vue vue-loader
  # 安装最新Vue 3和适配的vue-loader（@next对应Vue3版本）
  npm install vue@latest vue-loader@next
  

• 修正webpack插件引入路径：vue-loader v16+（适配Vue3）的插件导出方式已变更，替换原配置：

  // 原错误写法
  // const VueLoaderPlugin = require('vue-loader/lib/plugin')
  
  // 正确写法
  const { VueLoaderPlugin } = require('vue-loader')
  

• 确保webpack的.vue文件处理规则正确：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin()
    ]
  }
  

2. 修正main.js的Vue3初始化逻辑 #

完全替换Vue2的全局Vue实例写法，改为Vue3的createApp模式：

// 移除 import Vue from 'vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 原Vue.use(xxx)需改为app.use(xxx)，注意插件需适配Vue3
// 例如Vuex要升级到v4，Vue Router要升级到v4
app.mount('#app')

3. 处理其他依赖兼容性 #

• 升级核心插件到Vue3适配版本：

  # Vuex v4（适配Vue3）
  npm install vuex@next
  # Vue Router v4（适配Vue3）
  npm install vue-router@4
  

• 清理依赖缓存，避免冲突：

  rm -rf node_modules package-lock.json
  npm install --legacy-peer-deps
  

• Bootstrap建议替换为Bootstrap 5（无jQuery依赖，更适配Vue3），或改用Vue3专属UI库如Element Plus、Vuetify 3。

4. 排查剩余Vue2语法 #

• Vuex/store.js：替换为Vue3的createStore写法：

  import { createStore } from 'vuex'
  
  export default createStore({
    state: {},
    mutations: {},
    actions: {}
  })
  

• 检查组件内的Vue2专属API：移除this.$on/this.$off等已废弃方法，过滤器（filters）需替换为计算属性或全局方法。

内容的提问来源于stack exchange，提问作者Wasiq Bin Zahid