[vite]: Rollup failed to resolve import "@/utils/xxx" from "/Users/xx/my-projects/xxx

本篇文章依然是记录一下在使用taro开发小程序中解决遇到问题的一个小案例，希望对大家有帮助。

问题

[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".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

问题描述

从上面的问题描述中可以看出，在我的tsx文件中使用了某个import xxx from "@/utils/xxx_util"这种的引入，但是vite编译时rollup无法解析这样的路径。

所以这个问题就是路径或者别名alias的编译配置出了问题。

解决方法

我的小程序工程使用了vite来构建，而且是taro的typescript类型语法，这是我小程序工程的配置，我摘取部分配置出来：

然后因为是typescript来编写的，所以自然也包含tsconfig的配置，下面也是截取部分展示：

从上面的基础条件中，我们可以得知的是，tsconfig中已经配置了paths，但是为什么还是报错呢？原因有2个方面，一个是tsconfig的paths并没有配置完整，另一个是我们并没有在vite的构建中去使用这个paths的配置，那么针对这2个方面，我们逐步解决。

1. 完善tsconfig.json中的paths配置

之所以这么说，我们可以从tsconfig官网（网址：https://www.typescriptlang.org/zh/tsconfig/?#paths）中得到答案:

从上面的截图中你应该明白如何配置paths了吧，并且如果配置paths，那么必须配置baseUrl.
所以完善我们的配置：

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["./src", "./types", "./config"],
  "compileOnSave": false
}
...

2. 让vite能解析paths

这里需要使用到插件来解决这个问题，有一个插件能解决我们的问题：vite-tsconfig-paths
（npmjs链接：https://www.npmjs.com/package/vite-tsconfig-paths）

我们可以直接看到这个package的描述：

Give vite the ability to resolve imports using TypeScript's path mapping.

所以我们根据文档中的用法安装，并在config/index.ts文件中进行配置：

...
import tsconfigPaths from "vite-tsconfig-paths"; // <- 引入插件
...

export default defineConfig<"vite">(async (merge, { command, mode }) => {
  const baseConfig: UserConfigExport<"vite"> = {
    ...
    compiler: {
      type: "vite",
      prebundle: {
        exclude: ["@nutui/nutui-react-taro", "@nutui/icons-react-taro"],
      },
      vitePlugins: [
        tsconfigPaths(), // <- 使用插件
      ],
    },
    ...
  }
  ...
}
...

至此，问题解决了，希望对大家有帮助。