vue中使用lodash方式及webpack配置优化

最近vue项目中有很多操作数据的需求，考虑到lodash功能之强大，决定在项目中使用一下。

1.安装lodash

cnpm i lodash -S 
npm i lodash -S --registry=https://registry.npm.taobao.org

2.引入

//全局引入，在main.js中：
let _ = require('lodash')
Vue.prototype._ = _ //全局挂载lodash
//按需引入
let _fun= require('lodash/fun') 或
import fun from 'lodash/fun' 

3.使用

//全局引入
this._.debounce(this.handleClick,1000,false)
//按需引入
_fun(xxx)

4.webpack配置

//安装插件：
npm i -S lodash-webpack-plugin babel-plugin-lodash --registry=https://registry.npm.taobao.org
//.babelrc中添加lodash
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    "lodash"
  ]
}
//vue.config.js文件中：
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
module.exports = {
  chainWebpack: config => {
    config
      .plugin("loadshReplace")
      .use(new LodashModuleReplacementPlugin())
  }
}

注意：在main.js中如果用import引入lodash为undefined,用require试一下。我使用的lodash版本为4.17.20。直接import _ from ‘lodash’ 获取到的_是undefined，改用require就解决了这个问题。