[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f2DPeifOIX5vxaiE_h_FIFIr6K5bxPj84CWoFP5jNBoI":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},172,"2025-11-07T07:45:11.219Z","[vite]: Rollup failed to resolve import \"@/utils/xxx\" from \"/Users/xx/my-projects/xxx","本篇文章依然是记录一下在使用taro开发小程序中解决遇到问题的一个小案例，希望对大家有帮助。\n\n## 问题\n![taro vite plugin error](https://image.xinwei.ltd/image1762499717791.png)\n\n> [vite]: Rollup failed to resolve import \"@/utils/xxx_util\" from \"/Users/xxx/Documents/my-projects/mini/xxx/front-mini/xxx-mini/src/pages/xxx_play/index.tsx\".\nThis is most likely unintended because it can break your application at runtime.\nIf you do want to externalize this module explicitly add it to\n`build.rollupOptions.external`\n\n## 问题描述\n从上面的问题描述中可以看出，在我的`tsx`文件中使用了某个`import xxx from \"@/utils/xxx_util\"`这种的引入，但是vite编译时rollup无法解析这样的路径。\n\n所以这个问题就是路径或者别名`alias`的编译配置出了问题。\n\n## 解决方法\n我的小程序工程使用了vite来构建，而且是taro的typescript类型语法，这是我小程序工程的配置，我摘取部分配置出来：\n![vite 构建配置](https://image.xinwei.ltd/image1762500358565.png)\n\n然后因为是typescript来编写的，所以自然也包含tsconfig的配置，下面也是截取部分展示：\n![tsconfig.json内容](https://image.xinwei.ltd/image1762500476948.png)\n\n从上面的基础条件中，我们可以得知的是，tsconfig中已经配置了`paths`，但是为什么还是报错呢？原因有2个方面，一个是tsconfig的paths并没有配置完整，另一个是我们并没有在vite的构建中去使用这个`paths`的配置，那么针对这2个方面，我们逐步解决。\n\n### 1. 完善tsconfig.json中的paths配置\n之所以这么说，我们可以从tsconfig官网（网址：[https://www.typescriptlang.org/zh/tsconfig/?#paths](https://www.typescriptlang.org/zh/tsconfig/?#paths)）中得到答案:\n\n![paths 解释1](https://image.xinwei.ltd/image1762500730810.png)\n\n![paths 解释2](https://image.xinwei.ltd/image1762500784528.png)\n\n从上面的截图中你应该明白如何配置`paths`了吧，并且如果配置`paths`，那么必须配置`baseUrl`.\n所以完善我们的配置：\n```tsconfig.json\n{\n  \"compilerOptions\": {\n    ...\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"./src/*\"]\n    }\n  },\n  \"include\": [\"./src\", \"./types\", \"./config\"],\n  \"compileOnSave\": false\n}\n...\n```\n\n### 2. 让vite能解析paths\n这里需要使用到插件来解决这个问题，有一个插件能解决我们的问题：`vite-tsconfig-paths`\n（npmjs链接：[https://www.npmjs.com/package/vite-tsconfig-paths](https://www.npmjs.com/package/vite-tsconfig-paths)）\n\n我们可以直接看到这个package的描述：\n> Give vite the ability to resolve imports using TypeScript's path mapping.\n\n所以我们根据文档中的用法安装，并在`config/index.ts`文件中进行配置：\n```config/index.ts\n...\nimport tsconfigPaths from \"vite-tsconfig-paths\"; // \u003C- 引入插件\n...\n\nexport default defineConfig\u003C\"vite\">(async (merge, { command, mode }) => {\n  const baseConfig: UserConfigExport\u003C\"vite\"> = {\n    ...\n    compiler: {\n      type: \"vite\",\n      prebundle: {\n        exclude: [\"@nutui/nutui-react-taro\", \"@nutui/icons-react-taro\"],\n      },\n      vitePlugins: [\n        tsconfigPaths(), // \u003C- 使用插件\n      ],\n    },\n    ...\n  }\n  ...\n}\n...\n```\n\n至此，问题解决了，希望对大家有帮助。\n","本篇文章依然是记录一下在使用taro开发小程序中解决遇到问题的一个小案例，希望对大家有帮助。","https://image.xinwei.ltd/image1762499717791.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",13,{"id":24,"name":26,"parentId":21},"小程序",[],"",17,0,"taro vite, taro vite plugin, vite plugin, vite rollup, vite alias, tsconfig alias, tsconfig paths, rollup import, import @, tsconfig, taro config/index"]