使用webpack.ProvidePlugin配置全局api

zyf1910

于 2021-01-05 14:21:10 发布

阅读量807

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript vue.js 文章标签： javascript vue.js webpack

本文链接：https://blog.youkuaiyun.com/Jeo_blue/article/details/112228442

javascript 同时被 2 个专栏收录

18 篇文章

订阅专栏

vue.js

6 篇文章

订阅专栏

在Vue.js开发中，通过在webpack的dev和prod配置文件中添加ProvidePlugin，可以避免每个组件都导入API。配置后，组件可以直接使用全局API，但可能导致 ESLint 报“api is not defined”的错误。解决此问题的方法是调整ESLint配置以忽略特定代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用vue开发过程中，基本每个组件都需要import引入api接口，用webpack配置ProvidePlugin后，将不用再引入api，直接使用就可以。

配置方法：

1、在webpack.dev.conf.js和webpack.prod.conf.js中添加

 plugins: [
	...
	new webpack.ProvidePlugin({
		'api': 'api'
	})
	...
 ]

2、在webpack.base.conf.js中添加

resolve: {
	extensions: ['.js', '.vue', '.json'],
	alias: {
		'vue$': 'vue/dist/vue.esm.js',
		'@': resolve('src'),
		'api': resolve('src/api/index.js') //我将所有接口api都放在了src/api/index.js文件里
	}
},

在组件中使用：

methods: {
	api.getList(this.params).then(res => {
		console.log(res)
	}).error(err => {
		console.log(err)
	})
}

这样就可以直接使用了，不用每次都单独引入，但是这个时候会有一个问题:

eslint在代码检查的时候会报 “api is not defined”

解决方法请查阅：忽略Eslint不需要检查的代码