vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

这里给出基于Vue3和Vite的项目中，使用按需引入 Vant UI 组件库所遇到的 "Failed to resolve import" 报错的解决方案。

问题描述

在使用 Vite 构建 Vue 3 项目时，按需引入 Vant UI 组件库时会出现以下报错：

Failed to resolve import '../lib/.../style.css' from '@/index.css'

解决方案

方案一：安装插件

Vite 是一个基于原生 ES Modules 的构建工具，而 Vant 库是基于 CommonJS 模块编写的，因此在使用的时候需要帮助 Vite 将 CommonJS 模块转化为 ES Modules。

这里我们可以使用 vite-plugin-style-import 插件它支持将 Vant 库中的样式文件转化为 ES Modules，用于在 Vue 3 项目中按需引入。

具体安装步骤如下：

安装 vite-plugin-style-import 插件

npm install vite-plugin-style-import -D

在 vite.config.js 文件中配置插件

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({ // 配置样式插件
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`
        }
      ]
    })
  ]
})

在 main.js 中引入样式文件

import { createApp } from 'vue'
import App from './App.vue'
import 'vant/lib/index.css' // 引入vant样式
import router from './router'

createApp(App).use(router).mount('#app')

方案二：手动配置

如果不想使用插件，也可以手动在 vite.config.js 文件中配置 styleImport 解析器：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require('path');

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 需要修改为Vant组件库实际的目录 ，具体路径请根据项目实际情况而定
      'vant': path.resolve(__dirname, './node_modules/vant')
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          // 可在这里自定义主题颜色
        }
      }
    }
  }
})

然后在 main.js 中引入样式文件：

import { createApp } from 'vue'
import App from './App.vue'

import 'vant/lib/index.css' // 引入vant样式

createApp(App).mount('#app')

示例说明

以按需引入 Vant 的 Button 组件为例：

安装 vant 库：

npm install vant -S

在需要使用 Button 组件的.vue 文件中按需引入组件：

<template>
  <van-button class="btn">Button</van-button>
</template>

<script>
import { Button } from 'vant'

export default {
  components: {
    [Button.name]: Button,
  },
}
</script>

<style lang="less" scoped>
.btn {
  margin-top: 20px;
}
</style>