likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 34

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

出现问题1.编译器不认识路径别名"@"[React] vite3 + react18 + ts4 项目初始化遇到的问题解决解决方法:找到项目根目录的tsconfig.json,在compilerOptions下增加

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

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

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

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

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

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

4.开启ip访问在默认配置下,只能通过 127.0.0.1:port 来访问,不能通过ip:port来访问项目,(只能自己访问自己,不能别人访问自己),需要设置 server.host: '0.0.0.0' 来开启ip访问。

完结。

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