vue3.2之vite配置别名路径

Posted on by rongl

vite.config.ts

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

// 引入 自动化引入插件
import AutoImport from 'unplugin-auto-import/vite'
// 配合上方 实现ele-plus按需引入
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config src/auto-import.d.ts/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'],
      dts: 'src/auto-import.d.ts'
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve:{
    //设置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
      '*': path.resolve('')
      },
  }
})

tsconfig.json

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

使用

<template>
  <section class="a">
    <Login></Login>
  </section>
</template>
<script setup lang="ts">
import Login from "@/view/login.vue"
</script>
<style>

</style>

注意点

  • 就是 @/view/XX.vue 后面的.vue等后缀 不能省略