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")
    })
}