Vite(Vue3+ts)如何配置@,包含ctrl跳转的正常使用

Nec22019

已于 2024-08-30 09:53:02 修改

阅读量529

点赞数 2

分类专栏：前端文章标签： vue.js 前端 javascript typescript

于 2024-04-19 16:17:39 首次发布

本文链接：https://blog.csdn.net/Nec22019/article/details/137968960

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 创建的vite项目

pnpm create vite XXXX  --template vue-ts

2.1 安装相应的@types/node

pnpm install @types/node -D

2.2 项目下的vite.config.ts中对应配置修改,在defineConfig中增加alias

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'


export default defineConfig({
  plugins: [vue()],
  resolve: {
    // +++
    alias: {
      '@': path.resolve(__dirname, './src'),
    }, // +++
  },
})

完成以上可以正常使用@进行src的引用

3. tsconfig.json文件中,在compilerOptions下增加baseUrl和paths

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

完成以上可以在正常引用@的情况下使用ctrl进行跳转