全局引入lodash  ProvidePluginWebpack用来自动加载模块的方法,全局使用方式可以避免每个vue组件中都import lodash

npm i  lodash --s // 安装lodash

1、webpack.base.conf.js

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js',

login: './src/login.js',

vendor: 'lodash', // 多个页面所需的公共库文件,防止重复打包带入

},

.........

在webpack.dev.conf.js文件中的plugins增加(有试过直接在webpack.base.conf.js中添加,但是加完之后就报错了):

//全局引入lodash ProvidePlugin是webpack的内置模块,使用ProvidePlugin加载的模块在使用时将不再需要import和require进行引入

new webpack.ProvidePlugin({

_: 'lodash'

})

 

若是使用js那么按以上配置就可以全局使用了,若使用的是typescript,则还要继续配置

在src目录下的shims-vue.d.ts中添加

import * as lodash from 'lodash';

declare global { // 全局变量设置

     const _: typeof lodash

}

若不加上面的配置会报错:

TS2686: '_' refers to a UMD global, but the current file is a module. Consider adding an import instead.

至于shims-vue.d.ts是啥,使用了ts就造了

 

Logo

前往低代码交流专区

更多推荐