vite+ts项目中如何设置alias

目的：是为了简化代码，提高代码的可读性
代码环境： vue3 + vite + typescript

• vite.config.ts文件新增内容

只有.vue文件配置生效

import {
     defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'

const {
     resolve } = require("path");

export default defineConfig({
    
  plugins: [
    vue(),
    AutoImport({
    
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    
      resolvers: [ElementPlusResolver()],
    })
  ],
  resolve: {
    
    alias: {
    
    '@': resolve(__dirname, './src/'),
    },
  },
});

• tsconfg.json 文件新增内容

.ts文件配置生效

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

{
    
	"compilerOptions": {
    
		"target": "esnext",
		"useDefineForClassFields": true,
		"module": "esnext",
		"moduleResolution": "node",
		"strict": true,
		"jsx": "preserve",
		"sourceMap": true,
		"resolveJsonModule": true,
		"isolatedModules": true,
		"esModuleInterop": true,
		"lib": ["esnext", "dom"],
		"skipLibCheck": true,
		"baseUrl": "./",
		"paths": {
    
			"@/*": ["./src/*"]
		},
		"types": ["vite/client"]
	},

	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

• tips:配置好后记得重新启动项目！