关于vite 配置路径别名@一些记录

我写的项目中，发现配置别名这块有些问题故作记录

export default defineConfig({
  plugins: [react()],
  //定义别名
  resolve: {
    // alias:[{find:'@',replacement:resolve(__dirname,'src')}],
    alias: {
      '@': resolve("./src"),
    }
  },
  server: {
    hmr: true,
    host: "0.0.0.0",
    proxy: {
      "/baidubce-api": {
        target: "https://aip.baidubce.com",
        changeOrigin: true,
        xfwd: true,
        ws: true,
      },
    }
  },
})

另一个项目

export default defineConfig(({ command, mode }) => {
  return {
    base: mode == 'test' ? "/test/web/" : "/web/",
    //定义别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
    plugins: [vue()],
    server: {
      open: true,
      host: "0.0.0.0",
      hmr: true
    },
    esbuild: {
      jsxFactory: 'h',
      jsxFragment: 'Fragment',
      jsxInject: "import { h } from 'vue';"
    },
  }
})

在 Vite 2.x 中，alias 选项的确应当被放置在 resolve 对象内，这是官方文档推荐的配置方式。然而，Vite 的配置有一定的灵活性，尤其是在早期版本中，某些配置项可能在主配置对象中直接使用仍然能够被识别。

尽管如此，根据 Vite 的官方文档和最佳实践，alias 应该被包含在 resolve 对象中，导致上面

可能在 alias 直接放置在主配置对象中仍然工作的原因可能有以下几种情况：

1. 兼容性: Vite 在某些版本中可能仍然支持旧的配置方式，即使这不是推荐的用法。

2. IDE或类型定义: 你的 IDE 或 TypeScript 类型定义可能没有严格遵循 Vite 的最新规范，因此没有给出警告或错误。

3. 自定义配置: 你可能有自定义的配置或脚本，它们扩展了 Vite 的默认行为，使得非标准配置仍然可以被识别。

然而，为了保持代码的健壯性和未来版本的兼容性，建议遵循 Vite 的官方推荐配置方式，将 alias 放在 resolve 对象内。这样可以确保你的项目配置随着 Vite 版本的升级而保持一致性和正确性

原文地址：https://blog.csdn.net/weixin_42776027/article/details/140628270

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！