[React] vite2 + react17 + ts4 项目初始化遇到的问题解决

发布时间:2022-11-27 09:30

命令行输入:
npm create vite@latest vite-react-ts --template react-ts
创建项目,使用vscode开发项目。
(2022年7月15日,现在用vite创建项目,默认是react18)

出现问题
1.编译器不认识路径别名"@"
image.png
解决方法:
找到项目根目录的tsconfig.json,在compilerOptions下增加

"baseUrl": ".",
"paths": {
  "@/*": ["src/*"]
}

[React] vite2 + react17 + ts4 项目初始化遇到的问题解决_第1张图片

2.vite编译时不认识路径别名"@"
需要在vite.config.ts中plugin、server同级设置一个resolve
[React] vite2 + react17 + ts4 项目初始化遇到的问题解决_第2张图片
具体代码如下

resolve: {
alias: [
  {
    find: '@',
        replacement: path.resolve(__dirname, 'src')
    }
  ]
}

注意:
这里解析路径用到了node,在ts项目中,还需要安装@types/node

3.还会报错:
模块 "path"只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入ts
解决方法:
在根目录tsconfig.node.json中
给 compilerOptions 对象添加 "allowSyntheticDefaultImports": true
[React] vite2 + react17 + ts4 项目初始化遇到的问题解决_第3张图片

完结。

同步更新到自己的语雀
https://www.yuque.com/diracke...

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号