vue按需引入第三方插件_elementui元件按需引入踩過的坑

import 
           

代碼雖然隻引入了一個按鈕元件，其實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
           

vue-cli-service build

報錯：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"
    }
  ]]
}
           

vue-cli-service build 如此就大功告成了

最後也許你不是在main.js裡邊引入元件注冊，就有可能報這錯。

element/index.js

import { Button, Input } from 'element-ui'

const element = {
  install: function (Vue) {
    Vue.use(Button)
    Vue.use(Input)
  }
}

export default element
           

main.js

import element from './components/element/index'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(element)
           

vue-cli-service build

TypeError:Cannot read property 'bindings' of null at Scope.moveBindingTo

原因：在webpack 4.2以上使用，babel-preset-env配置檔案【env配置有問題】

// .babelrc配置

{
  "presets": ["@babel/preset-env"],
  "plugins": [[
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]
}