使用webpack.ProvidePlugin配置全局api

在使用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不需要检查的代码

你可能感兴趣的:(使用webpack.ProvidePlugin配置全局api)