1、配置 vite.config.ts ，修改文件别名

vite.config.ts 文件，配置别名

-- vite.config.ts --

import { defineConfig } from 'vite'

// 1. commonjs 需要改为 esmoule引入

// 2. 需要安装 @types/node

import { resolve } from 'path';

import vue from '@vitejs/plugin-vue'

export default defineConfig({

plugins: [vue()],

resolve: {

alias: [

{

find: '@', // 别名

replacement: resolve(__dirname, 'src'), // 别名对应地址

},

{

find: 'components',

replacement: resolve(__dirname, 'src/components'),

}

]

}

})

安装 @types/node 模块，解决使用 import 引入nodejs 的 path 模块 报错的问题。

npm i @types/node -D

2、配置tsconfig.json文件

通过 步骤1 设置完别名之后，ts 的解析会出现问题，如下图： 需要配置 tsconfig.json，设置 baseUrl 和 paths 属性。

-- tsconfig.json --

{

"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/*"],

"components":["src/components/*"],

"_pinia/*":["src/pinia/*"]

}

},

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

"references": [{ "path": "./tsconfig.node.json" }]

}

参考：

https://blog.csdn.net/weixin_53068161/article/details/126693499

参考阅读

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。