elementUI按需引入问题的解决

在对使用 Vue-cli 以及 ElementUI 创建的项目进行优化时,想到可以使用按需引入 ElementUI 来减少打包体积以实现优化,于是上 ElementUI 的官方找到按需引入的方法如下:

首先,安装 babel-plugin-component:

1
npm install babel-plugin-component -D

然后,将 .babelrc 修改为:

1
2
3
4
5
6
7
8
9
10
11
12
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

但是再进行第二步的过程中,发现这个文件本来是有内容的,于是首先想到了直接覆盖,但是覆盖之后马上就报错了,说明原本的配置也是有用的,再寻找了各种解决办法之后,终于找到了正确的解决办法,原来是需要做整合而不是直接覆盖,正确配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"presets": [
["env", {
"modules": false,
"targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] }
}],
["es2015", { "modules": false }], "stage-2",

],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component", {
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

留作记录,下次遇到类似问题可以直接参考。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!