解决vite配置element-puls按需导入报错问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决vite配置element-puls按需导入报错问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vite配置element plus按需导入报错

element plus快速上手

vite+vue3 相关知识记录

使用vite搭建vue3.0项目

vite常用配置

vite配置环境变量与模式

创建vite项目

按照顺序执行如下命令，即可基于 vite 创建 vue 3.x 的工程项目

npm init vite-app 项目名称

cd 项目名称
npm install
npm run dev

安装并使用element plus

根据官方文档安装、根据需求配置，这里选择官方推荐按需导入方式

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

按需导入： 首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

配置vite.config.js

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

至此顺利的话，可以正常运行项目啦。

报错问题

部分截图，原因： 当前vite版本过低

解决vite配置element-puls按需导入报错问题

当前vite版本

解决vite配置element-puls按需导入报错问题

解决方案

卸载重新安装 vite 版本，当前最新版本"vite": "^4.1.1"

npm install vite -D

运行报错

安装 vite 成功后，重新启动运行报错
原因： 当前 node 版本【14.15.1】与 vite 版本【4.1.1】不匹配，导致报错
查看所有 node 版本命令：npm view node versions

解决vite配置element-puls按需导入报错问题

解决版本不兼容问题

我这里选择升级 node 版本【14.18.2】，当然也可以选择降级 vite 版本处理。

node版本升级后，运行报错

node 版本升级后，项目运行报错，如下图

解决vite配置element-puls按需导入报错问题

继续解决报错问题

根据提示：安装@vitejs/plugin-vue

npm i @vitejs/plugin-vue -S

这时如果直接运行，会出现如下错误，需要配置文件中导入插件

解决vite配置element-puls按需导入报错问题

在vite.config.js配置文件中导入并使用@vitejs/plugin-vue

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

export default defineConfig({
  plugins: [
    vue(),
	// ...
  ],
})