vite起别名时path.resolve(__dirname, './src')和‘/src’的区别？

Question

试了一下这两种都是可行的，打包后用vscode的live server运行也没问题，他们有什么区别吗？

Answer 1

别名alias的原理是替换

第一种：当配置了'@': path.resolve(__dirname, './src')，因为path.resolve会将路径转换为绝对路径所以是相当于：
'@': '/User/xxx/xxx/project/my-vite/src'
替换：@/components/index.vue => /User/xxx/xxx/project/my-vite/src/components/index.vue
这个转换后的路径是没问题的

第二种：当配置了'@': '/src'
替换 @/components/index.vue => /src/components/index.vue
这个转换后的路径如果后续不处理是有问题的，因为根据绝对路径找不到这个文件

但是 vite 会先尝试找一下，如果你是绝对路径，会先在项目根目录（也就是你配置的root）下尝试找这个文件，/abc => root/abc

第一种因为是绝对路径也会先在项目根目录找一下，但是 /root/root/src/components/index.vue 双root肯定 找不到

区别就是，第一种更精确一点，第二种会被root影响，当然一般情况也不会修改root

Answer 2

一个是绝对路径一个是相对路径而已，你这里在项目根目录下执行时、指向的都是同一个目录当然没区别了。

__dirname 会在 Webpack 构建时被替换为所在模块文件的绝对路径。