使用 vite 配置目录别名

1.安装types/node来加载path模块
 
npm i @types/node --save-dev
 
2.在vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
const path = require("path”)要改成
Import path from ‘path’;  // vite里不支持require写法
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      // 这里的 @ 就是我们要为 src 配置的别名
    }
  }
})
 
3.配置tsconfig.json
在 tsconfig.json 的 compilerOptions 选项中加入
"baseUrl": ".",
"paths": {
   "@/*": [
     "src/*"
   ]
}
这样就可以在任何位置愉快地使用 @/ 来代替 src 啦!当然如果需要其他的 alias 直接在 vite.config.ts 中添加条目即可
 
 
posted @ 2022-09-05 14:38  szchenrong  阅读(631)  评论(0编辑  收藏  举报