alias别名的设置需要储备的基础知识：（知识点知道的直接点目录alias设置跳转）

1、node.js path模块

2、js基础或者ts基础。

首先，你需要知道path模块的导入在node.js中是怎么进行导入的

const path=require（’path‘）
//这个地方我们使用的require方法导入进来的。
//但是这种使用方法应该只适合在vue cli 使用webpack的环境了。
//当我在vite中使用上面的导入方式并使用node进行运行的时候。

//这是我vite项目里面在src/other/test1.js中的代码
 const path=require('path')
 const pathstr =path.join(__dirname,'index.html')
 console.log(pathstr);
//使用 node 运行 test.js
/别告诉我你不会使用node 运行test.js 文件。
//好吧!终端cd  进入你test.js文件，然后node test.js  要多多使用tab键这样能快速加载你 cd后面的文件名
// 会出现以下的运行结果：
require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension        and '/Users/gaojianping/Desktop/前端学习路线/vue/vue项目实       战/vue3.2+vite+pinia/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
 
 上面的结果什么意思呢？意思就是vite在ES模块里面就没有定义require 。你呢需要使用import 来进行代替。

使用import导入path模块

//代码如下   
import path from 'path'
 const pathstr =path.join(__dirname,'index.html')
 console.log(pathstr);
 
 //他会告诉你，你成功了。（你想多了）
 这是运行结果
 __dirname is not defined in ES module scope
 
 它会告诉你在ES模块中没有定义__dirname.这怎么办呢？
 
 我告诉你啊，凉拌还能怎么办？去查呗。
 
 
 
 //不用查了，我给你查到了
 import { fileURLToPath } from 'url';
 //这个是干嘛的呢，其实你把代码cope一下，把这块注释掉,哎(我这个ai是二声不是一声，哎对就是你想的那味)，把下面的import.meta.url 一定义在把dirname一输出。 哎，你就知道报什么错了。
 const __filename = fileURLToPath(import.meta.url);
 
 const __dirname = path.dirname(__filename);







  import path from 'path'
  import { fileURLToPath } from 'url';
  const pathstr2=import.meta.url;
  console.log("pathstr2:"+pathstr2);
  const __dirname = fileURLToPath(import.meta.url);
  console.log("__dirname: " + __dirname);
  const pathstr =path.join(__dirname,'index.html')
  console.log("pathstr:"+pathstr);




运行结果：
 
pathstr2:file:///Users/gaojianping/Desktop/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/vue/vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/vue3.2+vite+pinia/src/other/test1.js
__dirname: /Users/gaojianping/Desktop/前端学习路线/vue/vue项目实战/vue3.2+vite+pinia/src/other/test1.js
pathstr:/Users/gaojianping/Desktop/前端学习路线/vue/vue项目实战/vue3.2+vite+pinia/src/other/test1.js/index.html

那么问题来了，path.join()方法的作用是啥？

这运行结果不是很明显吗？
进行地址拼接啊。。fileURLToPath(import.meta.url)这一部分不就是test.js文件的绝对地址+我们后面给的index.html

path.join()方法的作用是什么？

是进行路径拼接。

fileURLToPath(import.meta.url)这个是获取当前文件所在的绝对地址-utf8格式。 import.meta.url这个是绝对地址。

path.join()方法的使用

1、想要获取上一级目录中的文件怎么获取？

  const pathstr =path.join(__dirname,'../other2/index.html')
  //这个就是修改后面添加文件的地址进行修改。./跟../会用吧。其实使用这种方法，很方便后期维护你知道吧！不知道就算了，现在知道了吧。

终于终于到终点了path.resolve()方法

path.resolve()方法作用：:会把一个路径或路径片段的序列解析为一个绝对路径

//这是给你们整的小测验
   import path from 'path'
 const path1 = path.resolve('/a/b', '/c/d');
 console.log('path1'+ path1);
 // 结果： /c/d
 const path2 = path.resolve('/a/b', 'c/d');
 console.log('path2'+ path2);
 // 输出： /a/b/c/d
 const path3 = path.resolve('/a/b', '../c/d');
 console.log('path3'+ path3);
 // 输出： /a/c/d
 const path4 = path.resolve('a', 'b');
 // 输出： /Users/xiao/work/test/a/b
 console.log("path4"+ path4);
 
 
 
 是不是很不理解，为什么/a/b,/c/d 它输出的就是/c/d. 哎，他其实就是把两个拼接字符的首个’/‘看成了root根目录。你这样再去理解试试。

alias 别名设置

在此终于重点又来到了

alias别名设置他来了

第一步：在vite.config.js中导入path模块

 import path from 'path'

第二步:理解resolve.alias

类型： `Record<string, string> | Array<{ find: string | RegExp, replacement: string }>

这个其实就是说resolve.alias有两种类型。一个是对象的类型，另一种是数组的类型。

第三步:在export default defineConfig中的plugins下面添加resolve.alias

  代码如下：
   //第一种写法
   resolve:{
    alias :{  //这是一个对象吧！它得有键跟键名吧！
     "@": path.resolve(__dirname, "src"),
   }
  }
  //vite config js中我们就不需要再去重新配置__dirname了。这个vite.config.js跟我们项目中穿件的其他.js文件不一样。直接用就行了。别问我为什么不一样。这个你去问vite设计人。自己去官网问啊。
 //第二种写法
 resolve: {
  alias: [
   {
       find:'@',
       replacement:path.resolve(__dirname,'src'),
   }
 ]
}

注意：修改完vite.config.js要重启项目

vite -- alias别名设置方式

alias 别名设置