首页 > 其他分享 >记某项目的vue.config.js的配置,主要是获取git版本信息,并写入新创建的json文件

记某项目的vue.config.js的配置,主要是获取git版本信息,并写入新创建的json文件

时间:2024-08-09 16:51:05浏览次数:11  
标签:记某 vue dist js json git let const 版本信息

/** @format */
const moment =  require("moment");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const GreatePlugin = require("generate-asset-webpack-plugin");
const shell = require("shelljs");

let commitCount = Number(shell.exec("git rev-list --count HEAD"));  // 动态获取当前git分支提交总次数,用于方便查看版本大小

// 获取git的打包信息,新建一个json文件进行存储
// 获取项目打包的版本信息,但是不能返回对象格式。
let getVersion = function () {
  let info = {};
  info["打包日期"] = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
  let reflog = shell.exec("git reflog -1");
  let version = "v";
  if (reflog) {
    version = reflog.split(" ")[0];
  }
  if (reflog) {
    info["版本信息"] = `commitId=${version}`;
    info["最新版本信息"] = `${reflog}`;
    info["提交次数"] = `${commitCount}`;
  }
  return JSON.stringify(info);
};

// 版本号格式,1.x1.x2,其中1.x1为产品定义的版本号,默认为1.0,x2,为git提交的总数,通过命令获取

const pkgVersion = process.VUE_CLI_SERVICE.pkg.version; // 获取package.json文件里面的version版本号,格式为1.x1.x2,需要截取为1.x1
let index1 = pkgVersion.indexOf(".");
let index2 = pkgVersion.indexOf(".", index1 + 1);
const pkgVersionSub = pkgVersion.substr(0, index2);
const buildVersion = `${pkgVersionSub}.${commitCount}`;


const webpack = require("webpack");
let publicPath = "/";
let outputDir = "dist";
const date = moment(new Date()).format("YYYYMMDD");
let suffix = `${buildVersion}-${date}`;
const projectname = process.argv[3]; // 获取build后面的参数确定执行哪个文件
let VUE_APP_TYPE = process.env.VUE_APP_TYPE;
const fileOutputName = `${projectname}-${VUE_APP_TYPE}-${suffix}`;
if (process.env.NODE_ENV == "production") {
  publicPath = "./";
  if (VUE_APP_TYPE) { // 给打包的文件名加上后缀
    outputDir = `dist/${fileOutputName}`;
  } else {
    outputDir = `dist/${projectname}`;
  }
}

// 创建打包的json文件文件
let configureWebpackConfig = {
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
    }),
    // 创建版本信息json文件
    new GreatePlugin({
      filename: "version.json",
      fn: (compilation, cb) => {
        cb(null, getVersion(compilation));
      },
      extraFiles: [],
    }),
  ]
};
if (process.env.NODE_ENV == "production") {
  configureWebpackConfig.plugins.push(
    new FileManagerPlugin({
      events: {
        onEnd: {
          archive: [
            { source: `./dist/${fileOutputName}`, destination: `./dist/${fileOutputName}.zip` },
          ]
        }
      }
    })
  );
}

module.exports = {
  publicPath,
  outputDir,
  pages: {
    index: {
      entry: "src/main.js",
      // 模板来源
      template: "src/index.html",
      publicPath: "./",
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 提取出来的通用 chunk 和 vendor chunk
      chunks: ["chunk-vendors", "chunk-common", "index"],
    }
  },
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery",
      }),
    ],
  },
  configureWebpack: configureWebpackConfig,
  chainWebpack: (config) => {
    // 解决iview 按需引入babel转换问题
    config.module.rule("view-design").test(/view-design.src.*?js$/).use("babel").loader("babel-loader").end();
    // 修复xlsx-style包报错问题,自行修改cpexcel.js文件,并用修改后的本地包覆盖node_modules包
    config.resolve.alias.set("./dist/cpexcel", require("path").resolve(__dirname, "src/assets/lib/cpexcel.js"));
  },
  // fix: ol依赖的这两个包在开发环境没有将es6语法转为es5导致在IE上会报错问题
  transpileDependencies: [
    "ol-mapbox-style",
    "@mapbox/mapbox-gl-style-spec",
    "crypto-js",
    "@antv/g6",
    "@antv/layout",
    "d3-force",
    "d3-dispatch",
    "ml-matrix",
    "regl",
  ],
  lintOnSave: true,
  devServer: {
    proxy: {
      "/api": {
        target: "http://ip:port",     // 测试环境
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }

};

  

标签:记某,vue,dist,js,json,git,let,const,版本信息
From: https://www.cnblogs.com/luoxuemei/p/18351032

相关文章

  • 前端vue3学习记录二
    ref和reactive的补充在使用reactive 进行对象数据的响应化时,要注意,将响应式对象分配给一个新的对象的时候,新的对象是不具有响应式性质的functionChangecar(){car={brand:'红旗',price:20000}//没有响应式性质car=reactive({brand:'红旗',price:20......
  • 基于django+vue框架的贵州农产品销售平台设计与实现【开题报告+程序+论文】-计算机毕
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景近年来,随着电子商务的蓬勃发展和乡村振兴战略的深入实施,农产品上行通道的建设成为推动农村经济转型升级的关键一环。贵州,作为中国西南地区......
  • 基于django+vue框架的共享汽车管理系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着城市化进程的加速和环保意识的提升,共享汽车作为一种新型的出行方式,正逐渐受到公众的青睐。它不仅有效缓解了城市交通拥堵问题,还减少了......
  • ant disign vue pro 使用日期组件,无法动态赋值 解决
    原文地址:https://blog.csdn.net/weixin_43865196/article/details/121849591组件使用渲染<a-date-picker v-model="date" format="YYYY-MM-DD" valueFormat="YYYYMMDD" :allowClear="false" @change="(date,dateStr)=>{ this.da......
  • Vue 中的日期和时间 Django 后端的日期和时间 不一样
    Vue中的日期和时间 <el-date-picker></el-date-picker>  Django后端的日期和时间:projectId=1,beginDate=2024-08-10T16:00:00.000Z,endDate=2024-08-14T16:00:00.000Z,chulizhuangtai=,gaojingshijian= 解决方法  <el-date-pickerv-model="beginDate&quo......
  • vue2 bpmnjs流程图
    原作者gitee地址:gitclonehttps://gitee.com/cjy2353/best-vue-bpmnjs.git"bpmn-js":"^17.9.2","vue":"^2.6.11",node-v"v14.17.6"使用:`importBpmnfrom'com/Bpmn'components:{Bpmn,},`bpmn组件如下:......
  • Vue3实现印章徽章组件
    1、组件结构2、组件封装src/components/StampBadge/src/StampBadge.vue文件代码<template><divclass="first-ring"v-bind="getBindValue":class="getStampBadgeClass"><divclass="second-ri......
  • Vue3水印组件
    1、组件封装<template><divref="watermarkContainerRef"class="watermark-container"><!--插槽--><slot></slot></div></template><scriptsetup>import{ref,onMounted,watc......
  • ssm+vue高校科研团队管理系统【开题+程序+论文】-计算机毕业设计
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高校科研活动的日益增多和复杂化,传统的科研管理模式已难以满足现代科研团队高效运作的需求。高校科研团队作为科技创新的重要力量,其管理效率直接......
  • ssm+vue基于VUE的Web购物网站的设计与开发【开题+程序+论文】-计算机毕业设计
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,电子商务已成为全球经济的重要组成部分,深刻改变了人们的消费习惯与商业模式。购物网站作为电子商务的核心载体,不仅为消费者......