vue3 typescript报错Can‘t resolve ‘jsonwebtoken‘和import require导入报错

问题描述

首先npm install jsonwebtoken -S安装jsonwebtoken ，之后写代码如下：

//src\security\token.ts
//导入方法1
const jwt = require("jsonwebtoken");
//导入方法2
import { sign,  verify } from 'jsonwebtoken';
//导入方法3
import jwt  from "jsonwebtoken";

const secretKey = '&*^R*G&(FRDwp4eg3'   //secret
const expiresIn = 60;    //时效 (秒)

//生成jwt
const generateToken=(uid:string) =>{ 
    const token = jwt.sign(
        uid
    , secretKey, ()=>{return 1})
    return token
}
 
//解析jwt
const verifyToken=(token:any)=> {
    return verify(token, secretKey)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

遇到的bug（可能有记错的地方）

1，使用方法3报错Could not find a declaration file for module ‘jsonwebtoken’

改用方法1导入
1

2，eslin报错Require statement not part of import statement.

在package.json的"eslintConfig"的"rules"里加上"@typescript-eslint/no-var-requires": 0
1

3，报错Can’t resolve ‘stream’ in 'D:\workspace\vue\vue3demo\node_modules\jws\lib’等

npm uninstall jsonwebtoken  卸载jsonwebtoken，
npm install -D @types/jsonwebtoken 重新安装
1
2

4，报错Can’t resolve ‘jsonwebtoken’

在package.json的devDependencies同级目录加上如下配置，（加"@types/jsonwebtoke":false没用)。
至此可以使用jsonwebtoken了
  "browser": {
    "jsonwebtoken": false
  },
1
2
3
4
5

参考https://stackoverflow.com/questions/54162297/module-not-found-error-cant-resolve-crypto

发生这种情况的原因是，当您的 run ng serve 时，它会捆绑您在 package.json
中的依赖项，以便在浏览器上提供它。但是，package.json
通常同时包含服务器和浏览器依赖项，并且任何本机模块依赖项（如加密）都不能捆绑在浏览器上。在 package.json
的浏览器部分中设置“crypto”：false，告诉 ng serve 不要尝试捆绑该文件。

5，在express服务器里使用jsonwebtoken报错Cannot find module ‘jsonwebtoken’
全局安装jsonwebtoken和@types/jsonwebtoken都没用，npm install express-jwt即可