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

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

上一篇: export和export default的区别

下一篇: vue cli3 发布自己的包

element-ui 按需引入

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

安装插件

npm install babel-plugin-component -D

修改babel配置文件

官方建议

将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

我的修改

module.exports = {
  presets: ["@vue/app"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

使用，css 必须引入

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

vue.config.js

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

核心配置
    publicPath: '',
    outputDir: 'dist',
    // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
    assetsDir: './',

module.exports = {
    publicPath: '',
    outputDir: 'dist',
    // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
    assetsDir: './',
    // 修改 src 为 examples
    pages: {
        index: {
            // entry: "src/main.js",
            entry: "example/main.js",
            template: "public/index.html",
            filename: "index.html"
        }
    },
    configureWebpack: {
        plugins: []
    },
    productionSourceMap: false
};

结果能小一半