vue cli3 element ui 打包减少体积 按需引入

原文链接: vue cli3 element ui 打包减少体积 按需引入

element-ui 按需引入

https://element.eleme.cn/#/zh-CN/component/quickstart

安装插件

npm install babel-plugin-component -D

修改babel配置文件

官方建议

1将 .babelrc 修改为：
2
3{
4  "presets": [["es2015", { "modules": false }]],
5  "plugins": [
6    [
7      "component",
8      {
9        "libraryName": "element-ui",
10        "styleLibraryName": "theme-chalk"
11      }
12    ]
13  ]
14}

我的修改 

1module.exports = {
2  presets: ["@vue/app"],
3  "plugins": [
4    [
5      "component",
6      {
7        "libraryName": "element-ui",
8        "styleLibraryName": "theme-chalk"
9      }
10    ]
11  ]
12};

使用，css 必须引入

1import 'element-ui/lib/theme-chalk/index.css';
2import {Button} from 'element-ui';
3Vue.use(Button)

vue.config.js

主要设置为直接使用浏览器就能启动

1核心配置
2    publicPath: '',
3    outputDir: 'dist',
4    // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
5    assetsDir: './',
6
7module.exports = {
8    publicPath: '',
9    outputDir: 'dist',
10    // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
11    assetsDir: './',
12    // 修改 src 为 examples
13    pages: {
14        index: {
15            // entry: "src/main.js",
16            entry: "example/main.js",
17            template: "public/index.html",
18            filename: "index.html"
19        }
20    },
21    configureWebpack: {
22        plugins: []
23    },
24    productionSourceMap: false
25};

结果能小一半