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")
    })
}
相关推荐
万少3 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL9 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0224 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang26 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景28 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼28 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿30 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再33 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55537 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录42 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css