ProvidePlugin

Automatically load modules instead of having to import or require them everywhere

自动引入模块，代替在使用的地方通过 “import”或者“require”引入。

1、vue.config.js:

const webpack = require('webpack')
const path = require("path")
module.exports={
	configureWebpack:{
		plugins:[
			new webpack.ProvidePlugin({
				 factory: [path.resolve(__dirname, './src/factory.js'), 'default']
			})
		]
	}
}

注：identifier（标识符）: ['module1', 'property1'],

identifier（标识符）：在其他的模块中通过这个标识符进行访问；factory

module1：被引用模块的路径；path.resolve(__dirname, './src/factory.js')

property1：被引入模块中暴露（export xx）的属性，default

2、factory.js

import { ref, reactive, watch, computed, onMounted, shallowRef } from "vue";
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';

const proxy = { ref, reactive, watch, computed, onMounted, shallowRef}
export default function() {
	
	if (proxy.$router) {
		return proxy
	}
	proxy.$message = ElMessage;
	proxy.$router = useRouter();
	proxy.$route = useRoute();
	proxy.$store = useStore();
	return proxy
}

3、使用factory的组件:

<template>
  <div id="nav">
   <!-- <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> -->
	<h1>{{count}}</h1>
	<button @click="count++">+</button>
	
  </div>
  <router-view/>
</template>
<script setup>
	// console.log(factory);
	const that=factory();
	const count =that.ref(0)
	that.watch(count,(nv)=>{
		console.log(nv);
	})
	
</script>

<style lang="scss">

</style>

全局引入scss文件：

一、webpack的配置：

1、安装依赖

"sass": "^1.32.7",
 "sass-loader": "^12.0.0"

2、vue.config.js:

module.exports = {	
	css: {
		loaderOptions: {
			sass: {
				additionalData: `@import "./src/assets/style/variable.scss";`
			}
		}
	}
}

注：./src/assets/style/variable.scss是全局文件，additionalData必须这么写

二、vite的配置：

1、安装：

"sass": "^1.56.1"

2、vite.config.js

export default defineConfig({
	plugins: [vue()],	
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src',import.meta.url))				
		}
	},
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `@import "./src/assets/style/variable.scss";`
			},
		}
	}
})

全局模块vite配置：

1、安装：@rollup/plugin-inject - npm

npm install @rollup/plugin-inject -D

2、vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { viteExternalsPlugin } from 'vite-plugin-externals'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const inject = require('@rollup/plugin-inject')
const path = require("path")


// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue(),
		viteExternalsPlugin({
			vue: 'Vue',
			'vue-router': 'VueRouter',
			pinia: 'Pinia',
			"element-plus": "ElementPlus",
		}),
		inject({
			factory: path.resolve('./src/factory.js')
		})
	],
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src',import.meta.url))				
		}
	},
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `@import "./src/assets/style/variable.scss";`
			},
		}
	}
})

 通过cdn引入internals :vite-plugin-externals - npm

比如：

 webpack的配置参考：cdn引入第三方插件，解决发布新包强制刷新（缓存）_meng_xiaoxiao的博客-CSDN博客_使用cdn加载第三方模块