vite3+ts项目配置别名
-
在tsconfig.json中compilerOptions里面配置一些路径
"paths": { "@/*": ["./src/*"], "@helpers/*": ["./src/helpers/*"], "@services/*": ["./src/services/*"], "@vueUtils/*": ["./src/vueUtils/*"], "@layouts/*": ["./src/layouts/*"], "@components/*": ["./src/components/*"], "@views/*": ["./src/views/*"], "@assets/*": ["./src/assets/*"], "@mixins/*": ["./src/mixins/*"], "@store/*": ["./src/store/*"] }
-
安装path和@types/node
pnpm install path --save pnpm install @types/node --save-dev
-
在vite.config.ts里面配置别名
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"), } } })
-
在项目中使用别名
import { createApp } from 'vue' import './style.css' import App from '@/App.vue' createApp(App).mount('#app')