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")
    })
}
相关推荐
山河木马11 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina12 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者18 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享27 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享28 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海31 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子42 分钟前
深入理解TCP协议
前端·javascript·面试
万少43 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好2 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl