[vite] Internal server error: Failed to resolve import

Peraspera7

已于 2024-08-24 16:57:05 修改

阅读量675

点赞数 7

文章标签：前端

于 2024-08-24 14:05:15 首次发布

本文链接：https://blog.csdn.net/LD77547231/article/details/141498729

版权

在做Vue3+Vite+Vant 项目过程中，遇到了[vite] Internal server error: Failed to resolve import报错

这一步是在项目的vite.config.js 文件中，配置按需引入插件 vite-plugin-style-import 报错

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport, { VantResolve } from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
  server: {
    port: 3000,
  }
})

启动项目报错

解决方法：

在vite.config.js文件中的 styleImport插件里面加上 libs代码块：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport, { VantResolve } from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: name => `../es/${name}/style`
        }
      ]
    }),
  ],
  server: {
    port: 3000,
  }
})