Vite + TS 配置项目路径@

原创已于 2022-12-05 18:10:10 修改 · 817 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript

于 2022-12-05 16:31:45 首次发布

本文介绍了如何在Vite项目中配置 TypeScript 的路径，并详细说明了安装Node类型声明文件的过程。在Vite配置文件vite.config.ts中进行特定设置，但需要注意在vite^3.2.3版本中可能出现的报错问题，以及解决这个问题的方法。

在vite.config.ts中增加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

需要安装node的类型声明文件

yarn add @types/node -D

修改tsconfig.json,增加如下配置

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

注意：修改完 vite.config.ts 文件需要重启

以上写法在vite^3.2.3版本中有报错

解决:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// const path = require('path')

// vite的版本是3.1.0，这个版本不支持持commonJS

// 所以必须把代码换成 import形式

// 解决 !!

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