当前位置：首页 > news >正文

【油猴脚本 0】油猴脚本工程化开发 vue3 element-plus

news 来源：原创 2025/4/27 7:59:52

刚开始很多油猴脚本都是手写的，简单代码是能满足需求，但是项目大了、模块多了，手工写很是费劲，这里介绍一款简单好用的油猴脚本工程化开发的脚手架工具，支持多种框架，同时介绍下油猴脚本如何使用 vue3 element-plus 开发。

vite-plugin-monkey

创建项目

pnpm add -D vite-plugin-monkeypnpm create monkey选择 vue
选择 jspnpm i

调试项目

vscode 资源管理器勾选上 npm 脚本

在 dev 右侧点击运行即可，自动打开浏览器页面，如果安装了油猴插件，便可点击安装脚本，没有安装油猴插件则有问题

调试时，直接网络加载本地代码运行，使用本地安装的依赖包

构建项目、预览项目

首先需要在 vite.config.js 文件配置 cdn 替代调试环境的本地依赖包

运行 build 会打包成一个标准的油猴脚本，dist 目录下，

运行 preview 后，由于 element-plus 依赖于 vue3，会报如下错误

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'defineComponent')

开发框架官方给了如下的解决方式

import { defineConfig } from 'vite';
import monkey, { cdn, util } from 'vite-plugin-monkey';export default defineConfig(async ({ command, mode }) => ({plugins: [monkey({// ...build: {externalGlobals: {vue: cdn.jsdelivr('Vue', 'dist/vue.global.prod.js').concat(util.dataUrl(';window.Vue=Vue;')),'element-plus': cdn.jsdelivr('ElementPlus', 'dist/index.full.min.js'),},},}),],
}));