【关于vue项目安装Loadsh之后打包到服务器不生效】

Loadsh 在webpack中的配置

最近接手了一个项目，里面的配置逻辑让人很烦躁，由于技术栈采用不完善，基本上都是需要手动配置并引用的；
有一天写代码需要用到递归拷贝时，由于本人懒且喜欢Loadsh这种弹药库式的语法插件，于是安装并正常引用。在本地时可以解析并使用，但是打包到服务器时就不生效或者项目打不开；且没有报错提示。偶尔会提示 无法读取CloneDeep() ；于是我就想倒本地可以解析使用，服务器上并不可以，那就应该是打包时候出了问题。

安装Loadsh

1. npm i -save lodash 全局安装；
2. let lodash = require("lodash") 在main.js中引入·Loadsh（全局引入）；
3. Vue.prototype._ = lodash;将定义引入完的Loadsh 进行实例化；

你以为这就完了？webpack可能缺东少西哦！（打包配置）

1. 我们要在根目录 vue.config.js 文件下配置一下loadsh；
2. 我们vue项目种采用ES6的语法很多，但是浏览器不支持，我们用到babel来将ES6的语法转化为更加兼容的JS语法

// An highlighted block
 plugins: [
   			 "lodash", // 只需配置此处，声明需要转化Loadsh为兼容JS语法
   				 [
      				"component",
     				 {
      					  libraryName: "element-ui",
        					styleLibraryName: "theme-chalk",
    				  },
   				],
         ],

到此处还需要在vue.config.js文件中配置

const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); //引入处 文件头部

在文件的module.exports中

module.exports = {
    config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin());
   };

**

就万事大吉啦！

**