Webpack 在安装时无法解析 "vue-property-decorator" (v10.X) 库

Question

我在尝试从库 vue-property-decorator 导入某些功能时遇到错误 Module not found: Error: Can't resolve './decorators/Emit'...好吧，如果原因很简单，比如忘记安装这个包，我就没有问这个问题.软件包已安装并显示：

IntelliJ IDEA 不会以某种方式在文件三视图中显示它，但我仍然可以通过 go to source 功能查看它，当然，我通过本机文件系统检查这些文件。

错误如下：

ERROR in ../node_modules/vue-property-decorator/lib/index.js 3:0-41
Module not found: Error: Can't resolve './decorators/Emit' in 'C:\Users\XXXX\Package\node_modules\vue-property-decorator\lib'
 @ ./index.ts 1:0-49 2:12-19

ERROR in ../node_modules/vue-property-decorator/lib/index.js 4:0-45
Module not found: Error: Can't resolve './decorators/Inject' in 'C:\Users\XXXX\Package\node_modules\vue-property-decorator\lib'
 @ ./index.ts 1:0-49 2:12-19

ERROR in ../node_modules/vue-property-decorator/lib/index.js 5:0-43
Module not found: Error: Can't resolve './decorators/Model' in 'C:\Users\XXXX\Package\node_modules\vue-property-decorator\lib'
 @ ./index.ts 1:0-49 2:12-19\

通常在忘记 TypeScript 编译器的某些设置时会发生此类错误，例如 allowSyntheticDefaultImports 或 esModuleInterop。但是，这些错误是 Webpack 错误，而不是 TypeScript 错误。但以防万一，我将附加我的 TypeScript 配置：

{
  "compilerOptions": {

    "target": "ES2020",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,

    "baseUrl": "./",
    "paths": {}
  }
}

Webpack 配置为：

import Webpack from "webpack";
import Path from "path";
import { VueLoaderPlugin } from "vue-loader";


const webpackConfig: Webpack.Configuration = {

  context: Path.resolve(process.cwd(), "Source"),
  entry: "./index.ts",
  output: {
    filename: "index.js",
    path: Path.resolve(process.cwd(), "Distributable")
  },
  mode: "development",
  watch: true,

  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [ /\.vue$/ ]
        }
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.pug$/u,
        oneOf: [
          {
            resourceQuery: /^\?vue/u,
            use: [ "pug-plain-loader" ]
          },
          {
            use: [
              {
                loader: "html-loader",
                options: {
                  minimize: { caseSensitive: true }
                }
              },
              "pug-html-loader"
            ]
          }
        ]
      }
    ]
  },

  resolve: {
    extensions: [ ".ts" ]
  },

  plugins: [
    new VueLoaderPlugin()
  ]
};


export default webpackConfig;

A 对于 Vue 2.x 的 vue-property-decorator 没有任何问题。但这是我对 Vue 3.x.

版本 10.x 的第一次体验

请不要向我推荐通过 Vue-cli 或 Vite 创建的样板 - 这里我们讨论的是使用 Webpack 进行手动设置。

Answer 1

您必须将 .js 扩展名添加到您的 Webpack 配置中：

resolve: {
  extensions: [".js", ".ts"]
},

.js 扩展总是必须包含在任何配置中，因为你所有的依赖项都将被编译为 JavaScript 并且 Webpack 也必须处理这些。

我克隆了你的仓库，之后 Webpack 只报告了一个关于缺少 pug 包的错误，但是安装它解决了这个问题，然后剩下的错误与你的 [=20= 中的 noUnusedParameters: true 有关].

Webpack 在安装时无法解析 "vue-property-decorator" (v10.X) 库

Webpack can not resolve "vue-property-decorator" (v10.X) library while it has been installed

typescript

webpack

vue.js

vue-class-components

vue-property-decorator