vue.config.js自定义插件和自定义vue-cli-service命令

devtools/2024/11/16 13:45:28/

自己做记录

自定义插件

define2.js

javascript">class TestDefine{constructor(){// this.name = 'test';}apply(compiler) {console.log("进入")compiler.hooks.environment.tap('pluginName', (compilation) => {process.UNI_SCRIPT_DEFINE={"WOBUGUAN":true,"WOBUGUAN2":false};console.log('webpack 构建正在启动=========!');});compiler.hooks.beforeRun.tap('pluginName2', (compilation) => {process.UNI_SCRIPT_DEFINE={"WOBUGUAN":true,"WOBUGUAN2":false};console.log('webpack beforeRun=========!');});// compiler.hooks.compilation.tap('compilation',compilation => {//     console.log("进入compilation-----------");//     // 在环境变量中添加一个新属性//   process.UNI_SCRIPT_DEFINE={//     "WOBUGUAN":true,//     "WOBUGUAN2":false//     };// })// compiler.hooks.environment.tap('MyPlugin', () => {//   // 在环境变量中添加一个新属性//   process.UNI_SCRIPT_DEFINE={//     "WOBUGUAN":true,//     "WOBUGUAN2":false//     };// });}
}
module.exports=TestDefine;

参考compiler 钩子 | webpack 中文文档 | webpack中文文档 | webpack中文网

vue.config.js

javascript">let TestDefine=require("./define2.js")
console.log("vue.config.js")
const { DefinePlugin } = require('webpack');
const ProcessOverridePlugin = require('./ProcessOverridePlugin'); // 调整路径以匹配实际位置
module.exports={configureWebpack:{plugins:[new TestDefine(),new DefinePlugin({// 使用 DefinePlugin 定义 process 对象,以便在编译时替换'process.env': JSON.stringify(process.env),}),]},
}

自定义vue-cli-service命令

看的这篇文章

vue-cli 3学习之vue-cli-service插件开发(注册自定义命令)-CSDN博客

package.json

javascript">{"name": "uniapp","version": "0.1.0","private": true,"vuePlugins": {"service": ["./vue-cli-plugin-test"]},"scripts": {"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service testdefine && vue-cli-service uni-build",}
}

vue.config.js

javascript">module.exports={pluginOptions: {test: {// vue-cli-plugin-test 插件可以作为 `projectOptions.pluginOptions.test` 访问这些选项,其他插件也可以拿到param: '传参内容'}}
}

vue-cli-plugin-test.js

javascript">module.exports = (api, projectOptions) => {api.registerCommand('test', {description: 'test plugin for vue cli 3',usage: 'vue-cli-service test',options: {}}, (args) => {// 输出传入的参数console.log('watch 命令注册成功')// console.log(projectOptions.pluginOptions.test.param,"+================test")})
}


http://www.ppmy.cn/devtools/18552.html

相关文章

vue 实现 下拉触底事件

注册滚动事件 window.addEventListener(scroll, this.onScroll, true) 事件触发 onScroll () {let scrollTop document.documentElement.scrollTop || document.body.scrollToplet clientHeight document.documentElement.clientHeightlet scrollHeight document.document…

如何在docker上面使用hbase shell

在新公司上班,hbase是cdh6.3.2安装在docker上面,如何直接在shell上面使用hbase shell是访问不到的。使用教程如下: 要在Docker上使用CDH 6.3.2中的HBase shell,你需要按照以下步骤操作: 步骤1:启动HBase服…

LabVIEW轴承表面缺陷检测系统

LabVIEW轴承表面缺陷检测系统 为了解决轴承生产中人工检测效率低下、误检率高的问题,实现了一套基于LabVIEW的轴承表面缺陷自动检测系统。该系统利用工业相机采集轴承图像,通过图像处理技术对轴承表面的划痕缺陷和倒角缺陷进行自动识别和分析&#xff0…

ttcp测试网络吞吐量

计算机网络中的几个性能指标 带宽:用来表示网络的通信线路传送数据的能力,通常是指单位时间内从网络中的某一点通过另一点的最高数据率,即网络设备所支持的最高速度 吞吐量:表示单位时间内通过某个网络(或信道、接口&…

未解决的问题:如何快速判断一个很大的数是否为质数

一、概要 质数是指因数只有1和自己的自然数 按照正常的遍历算法,当数字较大时,程序的运行时间达到了秒级,比如测试用到的最后两个数据 这只是int,如果是long或long long,那时间将会更长 所以问题来了:…

【动态规划】Leetcode 70. 爬楼梯【简单】

爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 示例 1: 输入:n 2 输出:2 解释:有两种方法可以爬到楼顶。 1 阶 1 阶2 阶 解题思路 …

Python和C++数学物理计算分形热力学静电学和波动方程

🎯要点 🎯数学逻辑和代码计算或可视化:🖊向下递归确定球面贝塞尔函数 | 🖊蒙特卡罗法模拟随机游走和放射性粒子衰减 | 🖊梯形规则积分算法 | 🖊高斯求积算法 | 🖊冯诺依曼拒绝&…

【基础篇】Git 基础命令与核心概念

✅作者简介:大家好,我是小杨 📃个人主页:「小杨」的csdn博客 🐳希望大家多多支持🥰一起进步呀! 一,Git 初识 1.1,问题引入 不知道你工作或学习时,有没有遇到…