Rails Webpacker编译Vue.js核心方法失败求助

你遇到的核心问题是Vue版本、编译工具与vue-loader版本不兼容，同时伴随Babel插件配置冲突的警告，以下是分步解决方案：

一、修复Vue依赖版本不匹配问题 #

你的package.json里混合了Vue2和Vue3的工具链：

• 安装的是vue@2.6.14（Vue2），但同时引入了@vue/compiler-sfc@3.1.5（Vue3专用的单文件组件编译器）
• vue-loader@16.3.1是为Vue3设计的版本，Vue2需要使用vue-loader@15.x系列

执行以下步骤修复依赖： #

1. 卸载不兼容的包：

npm uninstall @vue/compiler-sfc vue-loader

2. 安装Vue2兼容的依赖版本：

npm install vue-loader@15.9.8 vue-template-compiler@2.6.14 --save-dev

（注意：vue-template-compiler版本必须和vue主版本完全一致，这里匹配你的vue@2.6.14）

3. 修改后的package.json依赖部分参考：

{
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.0",
    "vue": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": {
    "vue-loader": "^15.9.8",
    "webpack-dev-server": "^3.11.2"
  }
}

二、解决Babel loose选项不一致警告 #

这个警告源于不同Babel插件的loose配置冲突，你可以在项目根目录创建或修改babel.config.js，统一相关插件的配置：

module.exports = function(api) {
  api.cache(true);

  return {
    presets: [
      ['@babel/preset-env', {
        loose: true,
        modules: false
      }]
    ],
    plugins: [
      ['@babel/plugin-proposal-private-methods', { loose: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }]
    ]
  };
};

（如果项目已有.babelrc文件，替换为上述配置即可，确保所有涉及loose选项的插件配置一致）

三、清理缓存并重新编译 #

1. 清除Webpacker缓存：

rake webpacker:clean

2. 重新安装所有依赖：

bundle install && npm install

3. 手动编译验证：

rake webpacker:compile

4. 启动Rails服务：

rails s

错误原因说明 #

• createBlock、createVNode等方法是Vue3的渲染函数API，由于你错误使用了Vue3的编译器和loader，导致编译时试图调用Vue2不存在的方法。
• Vue2和Vue3的构建工具链不兼容，必须严格匹配对应的loader和编译器版本才能正常工作。

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