【解决】uniapp的全局公共组件(不用在每个页面引入组件标签)，各平台均可使用！！！！

这篇具有很好参考价值的文章主要介绍了【解决】uniapp的全局公共组件(不用在每个页面引入组件标签)，各平台均可使用！！！！。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

感谢滚动君大佬提供的思路，但是此方法只适用于微信小程序

app端之所以不能用的关键原因在于不能找到resourcePath原始路径，不像小程序会提供一个路径区分哪些文件来自组件哪些文件来自页面，如果不做区分，那么页面栈就会超载，无法显示。

既然它自身不能提供路径，那么我们可以修改源码，路径在D:\Hbuild\plugins\uniapp-cli\node_modules@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\loaders\templateLoader.js
的templateLoader.js文件中修改代码如图：

【解决】uniapp的全局公共组件(不用在每个页面引入组件标签)，各平台均可使用！！！！,uni-app
在compilerOptions方法体中的最后一行加上
resourcePath: this.resourcePath
注意上一行的逗号不要忘了
然后在项目里面新建一个文件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.search("pages")!=-1){
				
				//防止app端重复加载而重复添加组件
				if(template.search("<upload_file/>")==-1){
					 template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${_}
							  <‘upload_file ’/>
					 `)
				}
			}
  			return compile(template,...args)
  		}
  		return options
  	})
  }
  
}

差点忘了你的组件必须是全局挂载的，在mian.js里面添加

import upload_file from '@/components/upload_file.vue'
 
Vue.component('upload_file', upload_file)

下面我自定义悬浮组件的源码
upload_file.vue

<template>
<view>
	<uni-fab :pattern="pattern"  :horizontal="horizontal" :vertical="vertical" @fabClick="upload_data" ></uni-fab>
</view>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				
				vertical: 'bottom',
				horizontal: 'right',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff',
					icon:'upload-filled'
				},
				
		}
	},
	methods:{
		upload_data(){
			this.$company.common({
			
			}, {
				'api':'unline'
			}).then(e => {
				console.log(e)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/	.uni-fab__circle--rightBottom[data-v-137a85dc] {
	    right: 15px;
	    bottom: 30px;
	    right: calc(70rpx + var(--window-right));
	    bottom: calc(150rpx + var(--window-bottom));
		}
	
	
</style>