vue element-ui 组件按需引入踩过的坑

作者: tww844475003 分类: 前端开发 发布时间: 2021-05-22 19:37
import Vue from 'vue'
import App from './App.vue'
import { Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Button)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

代码虽然只引入了一个按钮组件,其实build是把整个模块都打包了。

根据官网介绍:

按需引入借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。首先,安装 babel-plugin-component:

npm install -D babel-plugin-component

配置.babelrc文件
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
安装 babel-preset-es2015 插件
npm i -D babel-preset-es2015

报错:Plugin/Preset files are not allowed to export objects, only functions,说明babel版本太高了,不兼容。

两个方案可以解决:

1、降级到 babel 6.0 版本
2、安装新插件

npm i -D babel-preset-env

配置.babelrc文件
{
  "presets": [["env", {"modules": false}]],
  "plugins": [[
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]
}
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注