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的组件:

全局引入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加载第三方模块