Vite中配置路径别名

Vite中配置路径别名

刚接触vite+vue3的项目, 配置路由的时候不想通过…/…/访问, 想配置一个路径别名,踩坑

vite中配置别名和vue2的配置别名大差不差 但是会有版本的区别

首先初始化一个vue3+vite的项目,新建一个vite.config.js
在项目中引入基于nodejs的path模块

1. 先引入path模块

   const { resolve } = require(‘path’)

2. 添加如下代码 将项目中静态src路径修改为/@/ (重启项目即可配置成功)

   resolve: {
   alias: {
   ‘/@/’: resolve(__dirname, ‘src’),
   },
   },

注: vite 和 vite2版本配置不一致

如果项目是vite版的 需要将最外层的resolve给取消掉 (重启项目即可配置成功)

export default {
	alias: {
   		 '/@/': resolve(__dirname, 'src'),
    },
}