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

Question

当试图从库Module not found: Error: Can't resolve './decorators/Emit'导入一些功能时，我得到了错误的房产装饰师.那么，我没有问这个问题，如果原因很简单，比如忘记安装这个软件包。该软件包已安装并呈现：

​

​

IntelliJ的想法并没有以某种方式在文件三视图上显示它，但我仍然可以通过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-property-decorator的Vue 2.x没有任何问题。但这是我第一次使用10.x版本的Vue 3.x。

请不要推荐我的样板，通过Vue-cli或Vite -在这里，我们正在谈论与Webpack手工设置。

Answer 1

您必须在Webpack配置中添加.js扩展：

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

.js扩展始终必须包含在任何配置中，因为所有依赖项都将编译为JavaScript，Webpack也必须处理这些依赖项。

我克隆了您的回购程序，之后Webpack只报告了一个关于缺少pug包的错误，但是安装它解决了这个问题，那么剩下的错误与您的tsconfig.json中的noUnusedParameters: true有关。