原由

当前端项目组件比较多的时候，引用组件会面临路径特别长的情况，不易维护且容易出错。定义绝对路径映射是个好办法，下面就介绍 Vite+TypeScript 的项目中中的具体实现。

方案

• ​vite.config.ts​

  resolve: {
      alias: {
          "~": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"),
  	}
  }
  

• ​tsconfig.json​

  {
    "compilerOptions": {
      "paths": {
        "~/*": ["./src/*"]
      }
  }
  

vite使用nodeJS内置的模块

问题背景

Vite 是一个新工具，有助于快速启动和简化前端 Javascript 开发。 Vite 相对于 Parcel 等其他解决方案的主要优势是速度更快，并将编译限制为对依赖项的一次性操作，保持源代码不受影响（如果您不需要，因为 JSX 或 typescript）。

vite-下一代前端工具

它由两个主要部分组成：

• 一个通过原生 ES 模块为您的源文件提供服务的开发服务器，具有丰富的内置功能和惊人的快速热模块替换 (HMR)。

• 一个构建命令，将您的代码与 Rollup 捆绑在一起，预先配置为输出高度优化的静态资产以用于生产。
  它与 Snowpack 非常相似，并且这两个项目具有相同的好处。