vite+ts项目中如何设置alias

原创已于 2022-08-07 10:12:06 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-08-05 14:14:34 首次发布

TypeScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Vue3、Vite和TypeScript环境下，如何配置项目别名(@)以简化代码路径。通过修改vite.config.ts和tsconfig.json文件，设置'@'为指向'src/'的别名，实现代码的可读性提升。别名配置在重启项目后生效。

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:配置好后记得重新启动项目！