uniapp自定义全局loading组件（目前只适配微信小程序）

1.首先在项目根目录创建vue.config.js文件代码如下;

module.exports = {
	chainWebpack: config => {
		config.module.rule("vue").use("vue-loader").loader("vue-loader").tap(options => {
			const compile = options.compiler.compile
			options.compiler.compile = (template, ...args) => {
				if(!args[0].resourcePath){
					return compile(template, ...args)
				}
				if ((args[0].resourcePath.match(/^pages/) && !args[0].resourcePath.match(/^pages\/user\/index\/index/)) || args[0].resourcePath.match(/^pageA/) || args[0].resourcePath.match(/^pagesLive/)) {
					template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${_}
								
							`)
				}
				return compile(template, ...args)
			}
			return options
		})
	}
}

2.main.js添加这段代码替换uniapp全局loading方法并且全局挂载组件

// #ifdef MP-WEIXIN
uni.showLoading = function(){
	store.commit("changeLoading",true)
	// 注销uniapp showLoading方法
}

uni.hideLoading = function(){
	store.commit("changeLoading",false)
}
// #endif
//请求加载组件
import newRequestLoading from "./components/ccloading.vue";

//组件挂载到全局，方便每个页面使用
Vue.component("new-request-loading", newRequestLoading);

3.添加loading组件通过vuex控制组件loading状态