vite+ts项目配置路径别名

vite3+ts项目配置别名

1. 在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/*"]
       }
   

2. 安装path和@types/node

   pnpm install path --save
   pnpm install @types/node --save-dev
   

3. 在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"),
       }
     }
   })
   

4. 在项目中使用别名

   import { createApp } from 'vue'
   import './style.css'
   import App from '@/App.vue'
   createApp(App).mount('#app')
   

   ​