Vue2迁移Vue3：如何通过vue-loader配置指向@vue/compat？

1. 更新依赖（修改package.json） #

首先安装Vue3兼容包及对应版本的vue-loader：

npm install @vue/compat @vue/compiler-sfc vue-loader@next --save
# 若使用yarn
yarn add @vue/compat @vue/compiler-sfc vue-loader@next

同时将package.json中原有的vue依赖替换为@vue/compat，确保版本一致。

2. 修改vue-loader.config.js #

在配置文件中指定兼容模式的编译器：

module.exports = {
  // 指定@vue/compat的单文件组件编译器
  compiler: '@vue/compat/dist/compiler-sfc'
}

3. 调整webpack.base.config.js #

3.1 引入VueLoaderPlugin #

vue-loader v16+（适配Vue3）必须配合该插件使用，在文件顶部添加：

const { VueLoaderPlugin } = require('vue-loader')

3.2 设置Vue别名指向@vue/compat #

在resolve.alias中添加别名，确保所有import Vue from 'vue'的代码都指向兼容包：

resolve: {
  alias: {
    'vue$': '@vue/compat'
  }
}

3.3 确保vue文件规则正确关联配置 #

修改vue文件的loader规则，关联之前的vue-loader配置：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: require('./vue-loader.config.js') // 引入自定义配置
    }
  ]
}

3.4 添加VueLoaderPlugin到插件列表 #

在plugins数组中加入该插件：

plugins: [
  new VueLoaderPlugin(),
  // 其他已有的插件...
]

4. 入口文件配置（可选） #

在项目入口文件（如src/main.js）中，可配置兼容模式的具体行为：

import Vue from 'vue' // 已通过别名指向@vue/compat

// 配置兼容选项，MODE:2 保留Vue2大部分行为，MODE:3 趋近Vue3行为
Vue.config.compatConfig = {
  MODE: 2
}

注意事项 #

• 若项目使用了vue-router、vuex等依赖，需升级到适配Vue3的版本（vue-router@4、vuex@4）
• 检查原有Webpack配置中的其他loader（如babel-loader）是否需更新以适配Vue3语法

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