美文网首页
Vue3+Vite2+typescript 项目别名配置

Vue3+Vite2+typescript 项目别名配置

作者: _十六 | 来源:发表于2021-11-18 20:49 被阅读0次

vite.config.ts 文件中增加配置

官网参考:https://cn.vitejs.dev/config/#resolve-alias

首先引入 resolve 方法

import { resolve } from 'path'

然后增加resolve配置

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

vite.config.ts 完整内容

/* vite.config.ts */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }]
  }
})

这个时候使用 @已经没有问题了,但是还不能通过 CTRL + 点击 跳转到定义位置
接下来就要配置 tsconfig.json 文件来解决
增加配置项 baseUrlpaths

"baseUrl": ".", // paths 路径解析起点
"paths": {
    "@/*": ["src/*"] // 别名路径设置
}

tsconfig.json 完整内容

/* tsconfig.json */
{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".", // paths 路径解析起点
    "paths": {
      "@/*": ["src/*"] // 别名路径设置
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

这时候就能通过CTRL+点击跳转到定义文件位置

相关文章

  • Vue3+Vite2+typescript 项目别名配置

    在 vite.config.ts 文件中增加配置 官网参考:https://cn.vitejs.dev/confi...

  • vite 项目配置别名 @

    第一步,vite 配置vite.config.ts 文件增加 resolve.alias 配置 如果“path”有...

  • Git常见使用命令

    开发项目常用的几个命令: 1、本地库 2、远程库 3、分支管理 4、标签管理 配置别名 别名文件:Git配置文件都...

  • react项目配置路径别名

    方案一:使用 craco 库 1、下载craco依赖 npm i @craco/craco -D 2、在跟路径创建...

  • vite+ts项目中路径别名的配置

    vite.config.ts中别名配置 利用node中的path获取绝对路径 此时配置完成即可在项目中使用别名,但...

  • Taro3.x 配置项目遇到的问题

    1.Taro 配置 alias 为了在 Taro 项目中,配置目录别名,方便引用路径,减少../../../ 官方...

  • H5:craco的使用

    作用: a. 对项目中 wepback 进行自定义配置;b. 配置别名,方法引用的导入。 1、安装craco 和 ...

  • GIT配置和命令

    推荐使用 推荐配置成每个项目单独配置的方式: GIT设置ALIAS别名 GIT更新命令 GIT搜索 在commit...

  • 配置别名

    配置别名案例: git config --global alias.st status == git statu...

  • 配置别名

    有没有经常敲错命令?比如git status?status这个单词真心不好记。 如果敲git st就表示git s...

网友评论

      本文标题:Vue3+Vite2+typescript 项目别名配置

      本文链接:https://www.haomeiwen.com/subject/jrsjtrtx.html