【vite】Vite+Vue3+TS项目配置src别名

【Vite】Vite+Vue3+TS项目配置src目录别名

创建vite项目

npm init vite@latest 项目名

或者

npm create vite@latest 项目名

然后选择 Vue > TypeScripe

1、在vite.config.ts中

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

//引入内置模块 如果没有找到的话 npm i @types/node 就可以
import { resolve } from 'path';

export default defineConfig({
  plugins: [vue()],
  //配置使用别名和文件后缀省略  
  resolve: {
    //第一种写法:
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, 'src'),
      },
    ],
    //第二种写法：
    // alias: {
    //   '@': resolve(__dirname, 'src'),
    // },
    //文件后缀省略  
    extensions: ['.js', '.ts', '.vue', '.json'],
  },
});

2、在tsconfig.json中

"compilerOptions": {
    ...
    /* 配置别名 */
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
  }
},