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

自己做记录

自定义插件

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")
    })
}
相关推荐
群联云防护小杜6 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2419 分钟前
html复习
javascript·microsoft·html
汉得数字平台23 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹30 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows