1、常用开发相关依赖

1.1、element-ui

完整引入

# 配置
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);
//全局配置
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入

# 安装 babel-plugin-component
cnpm install babel-plugin-component -D
# 配置 babel.config.js文件
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
# 按需引入：查看文件 src/utils/ElementUiCom
[https://github.com/lifengand1992/elementuione/blob/master/src/utils/ElementUiCom.js](url)

按需引入报错，Cannot find module 'babel-preset-es2015',

# 方案一：安装npm install babel-preset-es2015 -D
# 方案二：调整配置bable.config.js
{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

1.2、低版本浏览器支持 es6

# babel-polyfill
cnpm install --save-dev babel-polyfill
# 情况1：配置webpack.js文件
module.exports = {
　　entry: ["babel-polyfill", "./app/js"]
};
# 情况二：vue.config.js
module.exports = {
    // 在exports中添加，这里很关键，不配置不行
    transpileDependencies: ['element-ui'],
    chainWebpack(config) {
          // 在chainWebpack中添加下面的代码
          config.entry('main').add('babel-polyfill') // main是入口js文件
    }

}

1.3、引入 echarts

# 安装
cnpm install echarts --save
# 完整引入
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;//或者在各个文件中引入上一句语句
# 按需引入
按需引入 ECharts 图表和组件
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';
// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);

1.4、axios

# 安装
cnpm install axios -S
# 使用

2、开发依赖

2.1 图片压缩

# 图片压缩
cnpm i -D image-webpack-loader
# 配置
chainWebpack: config => {
  config.module
  .rule("images")
  .use("image-webpack-loader")
  .loader("image-webpack-loader")
  .options({
      mozjpeg: { progressive: true, quality: 65 },
      optipng: { enabled: false },
      pngquant: { quality: [0.65, 0.9], speed: 4 },
      gifsicle: { interlaced: false },
      webp: { quality: 75 }
  });
}

2.2 小图片转化为base64,减少http请求

// 修改 Loader 选项

chainWebpack(config) {
    // 图片小于10kb转成base64，减少http请求
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, {
        limit: 10240
      }))
  }

2.3 打包分析

# 打包分析
cnpm install -D webpack-bundle-analyzer
# 配置
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const isProduction = process.env.NODE_ENV === 'production';
// 打包分析
// 打包之后自动生成一个名叫report.html文件(可忽视)
chainWebpack(config) {
  if (isProduction) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
          {
              analyzerMode: "static"
          }
      ]);
  }
}

2.4 开启gzip压缩

# 开启.gzip压缩文件
yarn add compression-webpack-plugin -D
或者
npm install compression-webpack-plugin -D
# 报错时卸载,安装低版本

# 配置 vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
  configureWebpack: (config) => {
      if (isProduction) {
        config.plugins.push(
        //压缩成gz
        new CompressionWebpackPlugin ({
            test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
            // 超过100kb压缩
            threshold: 100 * 1024
        })
      )
    }
  },
}

2.5 生产环境删除console

# 生产环境删除console
yarn add babel-plugin-transform-remove-console -D
# 配置 babel.config.js
const plugins = []
if (process.env.NODE_ENV === 'production') {
// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
  plugins.push([
    'transform-remove-console',
    {
      // 保留 console.error 与 console.warn
      exclude: ['error', 'warn']
    }
  ])
}
module.exports = {
   plugins: [
     ...plugins
   ]
}

3、vue.config.js配置

const path = require('path');
const isProduction = process.env.NODE_ENV === 'production';
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
  //基本目录
  publicPath: './',
  //构建输出目录
  outputDir: "dist",
  //构建静态资源目录（如：js,css,images）
  assetsDir: "static",
  //文件名hash
  filenameHashing: true,
  //是否使用eslint进行检测
  lintOnSave: false,
  //默认忽略node_modules文件，需要显示转译的依赖列举加入
  // 在exports中添加，这里很关键，不配置不行
  transpileDependencies: ['element-ui'], //配合babel-polyfill
  //是否需要生产环境的 source map
  productionSourceMap: false,
  //css相关配置
  css: {
    //样式提取到css文件[生产环境true,]
    extract: isProduction,
    requireModuleExtension: true, // 去掉文件名中的 .module
    //为预处理器的loader添加自定义选项
    loaderOptions: {
      scss: {
        //全局加入公用文件，.vue的<style lang="scss">里面不需要引入下面2个文件便可使用
        prependData: `
                @import "@/assets/css/_var.scss";
                @import "@/assets/css/_mixin.scss";
                `
      }
    }
  },
  //webpack配置
  configureWebpack: (config) => {
    if (isProduction) {
      //压缩成gz
      config.plugins.push(
        new CompressionWebpackPlugin({
          test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
          // 超过100kb压缩
          threshold: 100 * 1024
        })
      )
    }
  },
  // },
  // 修改 Loader 选项
  chainWebpack(config) {
  //打包分析
    if (isProduction) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{
        analyzerMode: "static"
      }]);
    }
    config.resolve.symlinks(true); // 修复热更新失效
    // 在chainWebpack中添加下面的代码
    config.entry('main').add('babel-polyfill') // main是入口js文件
    //别名
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('./src'))
      .set('@css', resolve('./src/assets/css'))
      .set('@images', resolve('./src/assets/images'))
      .set('@components', resolve('./src/components'))
    // 图片压缩
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        optipng: {
          enabled: false
        },
        pngquant: {
          quality: [0.65, 0.9],
          speed: 4
        },
        gifsicle: {
          interlaced: false
        },
        webp: {
          quality: 75
        }
      });
    // 图片小于10kb转成base64，减少http请求
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, {
        limit: 10240
      }))
  },
  // 它支持webPack-dev-server的所有选项
  devServer: {
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // 配置多个代理
    proxy: {
      "/api": {
        // target:"http://2.2.2.226:32586/dataservice/sjcl/api/lssthjzhjg/v1/", // 要访问的接口域名
        target: "http://192.168.3.161:30532/dataservice/sjcl/api/lssthjzhjg", // 要访问的接口域名
        ws: true, // 是否启用websockets
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          '^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
        }
      }
    }
  },
}

4、babel.config.js的配置

const plugins = [];
const isProduction = process.env.NODE_ENV === 'production';
if (isProduction) {
  // 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
  plugins.push([
    'transform-remove-console',
    {
      // 保留 console.error 与 console.warn
      exclude: ['error', 'warn']
    }
  ])
}
module.exports = {
  plugins: [
    ...plugins,
    //element-ui按需引入
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
  presets: [
    '@vue/cli-plugin-babel/preset',
    //element-ui按需引入
    ["@babel/preset-env", {
      "modules": false
    }]
  ]
}