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

Nec22019

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

阅读量755

点赞数 2

CC 4.0 BY-SA版权

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

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

本文链接：https://blog.youkuaiyun.com/Nec22019/article/details/137968960

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",