(react+ts)vite项目中的路径别名的配置

这篇具有很好参考价值的文章主要介绍了(react+ts)vite项目中的路径别名的配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简单两个步骤

  1. 找到vite.config.ts,这里会现实报错,需要安装一下 npm i -D @types/node 这个库的ts声明配置
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve:{
    alias:{
      "@":path.resolve(__dirname,'./src')
    }
  }
})

  1. 虽然配置好了@但是输入@没有提示,找到tsconfig.json
 "compilerOptions": {
  。。。。。

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

文章来源地址https://www.toymoban.com/news/detail-719366.html

到了这里,关于(react+ts)vite项目中的路径别名的配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite+react+ts+eslint+prettier构建react开发项目

    目录 一、构建项目 二、安装eslint和prettier的依赖 三、修改.eslintrc.cjs,创建.prettierrc.cjs 1、.eslintrc.cjs文件配置 2、ESlint忽略文件.eslintignore 3、.prettierrc.cjs文件配置  4、prettierrc忽略配置文件.prettierignore

    2024年02月11日
    浏览(45)
  • 搭建React项目,基于Vite+React+TS+ESLint+Prettier+Husky+Commitlint

    node: 20.10.0 安装包管理器pnpm 基于Vite创建项目 进入项目目录安装依赖 启动项目 1、初始化ESLint 按下图结果进行初始化选择: 按需选择完配置后,选择立即安装,就可一键安装相关依赖。安装成功后 ESLint 帮我们创建了 .eslintrc.cjs 配置文件(cjs 是指 CommonJS 格式)。 2、在项目

    2024年02月04日
    浏览(65)
  • 在vite+vue3项目中配置使用css预处理器(less/sass)以及路径别名

    vite已经将这些预处理器的loader内置了,我们不用再像在webpack项目中那样,需要下载和配置一堆相关的loader,我们只需要下载less,sass依赖,就能直接在项目中使用啦 使用npm或者yarn来安装以下依赖: Less预处理器: npm install -D less Sass预处理器: npm install -D sass 如图,下载之后

    2024年02月11日
    浏览(105)
  • 【React】TS项目配置Redux

    在React中使用Redux,官方要求安装两个插件, Redux Toolkit 和 react-redux Redux Toolkit (RTK): 官方推荐编写Redux逻辑的方式,是一套工具的集合集, 简化书写方式 。 简化 store 的配置方式 内置 immer 支持可变式状态修改 内置 thunk 更好的异步创建 react-redux :用来 链接 Redux 和 React组

    2024年01月22日
    浏览(37)
  • react+ts【项目实战一】配置项目/路由/redux

    1、该项目使用的是ts创建的 所以需要加上 --template typescript create-react-app kiki_ts_react_music --template typescript 2、 整理项目结构 删除一些自己用不到的文件 1.2.1 更换icon 1.2.2 更换项目名称 在index.html文件里面 1.2.1 配置项目别名 1、 npm i -D @craco/craco 2、在根文件创建 craco.config.ts 3、修

    2024年02月19日
    浏览(45)
  • React18TS项目:配置react-css-modules,使用styleName

    他的好处不说了 网上一堆文章一个能打的都没有, 添加开发依赖 Babel Plugin \\\"React CSS Modules\\\" | Dr. Pogodin Studio 看@dr.pogodin/babel-plugin-react-css-modules官方文档 不使用babel-plugin-react-css-modules 手搭webpack配置需要处理 1.能启用css modules 对于裸 Webpack,请参见webpack css-loader的 modules 的选项

    2024年02月12日
    浏览(48)
  • React18入门(第二篇)——React18+Ts项目配置husky、eslint、pretttier、commitLint

    我的项目版本如下: React: V18.2.0 Node.js: V16.14.0 TypeScript:最新版 工具: VsCode 本文将采用图文详解的方式,手把手带你快速完成在React项目中配置husky、prettier、commitLint,实现编码规范的统一,git提交规范的统一。 1.1 装包 1.2 ESLint 插件安装 1.3 创建命令并使用 新增命令 执行

    2024年02月08日
    浏览(56)
  • 【实战】 项目起航:项目初始化与配置 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(一)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月10日
    浏览(78)
  • 【实战】一、项目起航:项目初始化与配置 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(一)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月12日
    浏览(53)
  • vite 创建 react 项目

    npm create vite@latest 选择 react 和 ts 安装 redux react-redux npm i redux react-redux 安装 react-router-dom npm i react-router-dom 安装 reset-css 样式初始化 npm i reset-css 在 main.tsx 中引入 import \\\"reset-css\\\" 清除浏览器默认样式 安装 sass npm i sass 正确的样式引入顺序 样式初始化即 reset-css --》  ui框架样式

    2024年01月17日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包