Nuxt项目中配置Element-UI按需加载的完整步骤

作者：雾松时间：2026-10-23 19:43:34浏览：430

本文详细介绍在Nuxt项目中如何配置Element-UI的按需引入功能。通过安装element-ui和babel-plugin-component依赖，创建plugins/element-ui.js文件定义组件，并在nuxt.config.js中配置plugins和build.babel选项，实现减少打包体积的目标。同时涵盖关闭SSR及全局样式的处理细节。

Nuxt Element-UI 按需加载配置概述

在使用 create-nuxt-app 初始化 Nuxt 项目时，若将 Element-UI 选为默认组件库，系统默认并未启用按需加载机制，因此需要手动进行相关配置。

安装必要依赖

安装依赖

如果在项目初始化阶段未选择 Element-UI，则需要先执行安装操作。

npm install element-ui --save

或者

yarn add element-ui

要实现 Element-UI 的按需加载，必须安装 babel-plugin-component 插件。

npm install babel-plugin-component --save-dev

或者

yarn add babel-plugin-component

创建插件文件

安装完成后，在项目根目录下的 plugins/ 文件夹中创建插件文件，命名为 element-ui.js。


// element-ui.js
import Vue from 'vue'
import {
 Container,
 Header,
 Aside,
 Main,
 Menu,
 MenuItem,
 Button,
 Form,
 FormItem,
 Input
} from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

const components = [
 Container,
 Header,
 Aside,
 Main,
 Menu,
 MenuItem,
 Button,
 Form,
 FormItem,
 Input
];

const Element = {
 install (Vue) {
 components.forEach(component => {
  Vue.component(component.name, component)
 })
 }
}

Vue.use(Element, { locale })

配置 plugins 与 SSR 处理

配置 plugins 选项

在 nuxt.config.js 文件中，需要对 plugins 选项进行配置。


module.exports = {
 /*
 ** Plugins to load before mounting the App
 ** https://nuxtjs.org/guide/plugins
 */
 plugins: ["@/plugins/element-ui"],
}

Nuxt 默认开启服务端渲染（SSR），若需手动关闭 SSR，可配置如下：


module.exports = {
 /*
 ** Plugins to load before mounting the App
 ** https://nuxtjs.org/guide/plugins
 */
 plugins: [
 {
  src: "@/plugins/element-ui",
  ssr: false // 关闭ssr
 }
 ],
}

若在 create-nuxt-app 中默认选择了 Element-UI，还需移除其全局样式配置，即在 nuxt.config.js 中：


module.exports = {
 /*
 ** Global CSS
 */
 css: ['element-ui/lib/theme-chalk/index.css'],
}

删除 'element-ui/lib/theme-chalk/index.css' 作为全局样式的打包配置，改为


module.exports = {
 /*
 ** Global CSS
 */
 css: [],
}

配置 babel 选项

在 nuxt.config.js 文件中，需在 build 选项中配置 babel 相关设置：


module.exports = {
 /*
 ** Build configuration
 ** See https://nuxtjs.org/api/configuration-build/
 */
 build: {
 babel: {
  "plugins": [
  [
   "component",
   {
   "libraryName": "element-ui",
   "styleLibraryName": "theme-chalk"
   }
  ]
  ]
 }
 }
}

至此，Element-UI 的按需引入配置已完成。

总结

以上就是 Nuxt 配置 Element-UI 按需引入的完整方法，更多相关内容可参考本站其他文章或继续浏览后续内容，感谢支持。

作者最新文章

Vue项目中怎么集成JS颜色选择器组件

2026-11-05 13:28:32

Nuxt 3 快速上手：项目初始化与目录结构详解

2026-11-03 19:16:51

怎么在 Vue 或 React 项目中正确集成 viewer.js

2026-11-02 09:17:48

Vue3+Vue-Router+Vite实现动态路由的完整流程与代码示例

2026-11-01 03:30:58