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

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

1. export default defineConfig({
2.   plugins: [react()],
3.   //定义别名
4.   resolve: {
5.     // alias:[{find:'@',replacement:resolve(__dirname,'src')}],
6.     alias: {
7.       '@': resolve("./src"),
8.     }
9.   },
10.   server: {
11.     hmr: true,
12.     host: "0.0.0.0",
13.     proxy: {
14.       "/baidubce-api": {
15.         target: "https://aip.baidubce.com",
16.         changeOrigin: true,
17.         xfwd: true,
18.         ws: true,
19.       },
20.     }
21.   },
22. })

复制代码

另一个项目

1. export default defineConfig(({ command, mode }) => {
2.   return {
3.     base: mode == 'test' ? "/test/web/" : "/web/",
4.     //定义别名
5.     alias: {
6.       "@": path.resolve(__dirname, "./src"),
7.     },
8.     plugins: [vue()],
9.     server: {
10.       open: true,
11.       host: "0.0.0.0",
12.       hmr: true
13.     },
14.     esbuild: {
15.       jsxFactory: 'h',
16.       jsxFragment: 'Fragment',
17.       jsxInject: "import { h } from 'vue';"
18.     },
19.   }
20. })

复制代码

在 Vite 2.x 中，alias 选项的确应当被放置在 resolve 对象内，这是官方文档保举的配置方式。然而，Vite 的配置有肯定的灵活性，尤其是在早期版本中，某些配置项大概在主配置对象中直接利用仍然能够被辨认。
尽管如此，根据 Vite 的官方文档和最佳实践，alias 应该被包含在 resolve 对象中，导致上面
大概在 alias 直接放置在主配置对象中仍然工作的缘故原由大概有以下几种环境：

• 兼容性: Vite 在某些版本中大概仍然支持旧的配置方式，纵然这不是保举的用法。
  
• IDE或范例定义: 你的 IDE 或 TypeScript 范例定义大概没有严格遵循 Vite 的最新规范，因此没有给出告诫或错误。
  
• 自定义配置: 你大概有自定义的配置或脚本，它们扩展了 Vite 的默认举动，使得非尺度配置仍然可以被辨认。
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。