Vue 3.4.3 升级后使用 Webpack 构建资产失败？Laravel v8.75 解决方案

2024-03-01 12:16:10

Vue 3.4.3 升级后构建资产失败：Laravel v8.75 中使用 Webpack 的解决方案

在将 Vue 升级到 3.4.3 后，您可能会遇到在使用 Laravel v8.75 和 Webpack 构建资产时出现的错误。这篇文章将指导您逐步解决此问题，并提供一些提示，以防止将来出现类似问题。

问题诊断

更新 Vue 后，您可能会遇到以下 Webpack 错误：

[webpack-cli] Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

这个错误表明，您的项目缺少 @vue/compiler-sfc 依赖项，这是一个在构建 Vue 组件时必需的编译器。

解决方案

要解决此问题，请按照以下步骤操作：

检查 @vue/compiler-sfc 依赖项

确保 @vue/compiler-sfc 依赖项已添加到您的 package.json 文件中，并且版本与 Vue 版本兼容。对于 Vue 3.4.3，您需要 @vue/compiler-sfc": "^3.4.3"。

安装 @vue/compiler-sfc

如果 @vue/compiler-sfc 依赖项不存在，请使用以下命令将其安装：

npm install @vue/compiler-sfc@3.4.3

更新 vue-loader

确保 vue-loader 已更新到最新版本。对于 Vue 3.4.3，您需要 vue-loader": "^17.4.0"。

npm install vue-loader@17.4.0

检查 Webpack 配置

在 webpack.config.js 文件中，确保配置了 vue-loader 和 @vue/compiler-sfc。例如：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

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