vuecli3 vue.config.js git-repo-info输出git信息

vue.config.js 常用配置，

const path = require('path');

const webpack = require('webpack');
const getRepoInfo = require('git-repo-info'); // git信息插件

const isProd = process.env.NODE_ENV === 'production'; // 判断环境
const repoInfo = getRepoInfo(); // 调用获取git信息


module.exports = {
  publicPath: './', // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
  productionSourceMap: !isProd, //生产环境是否生成 sourceMap 文件,true会在生产环境可以看的源码
  outputDir:, 'dist' // 输出文件目录默认dist，或者自定义，不过生产一般都用dist，但是要求版本控制的时候，压缩包都要特定命名。比如按照时间，可以写个Makefile文件，
如tar:
	tar --exclude="dist/.DS_Store" -zcvf xxx-dist-$(shell date "+%Y%m%d-%H%M%S").tar.gz dist     可以将dist以gzip格式压缩并自定义名字

  lintOnSave: !isProd, 
  //lintOnSave设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。当 lintOnSave 是一个 truthy 的值时，eslint-loader或者，你也可以通过设置让浏览器 overlay 同时显示警告和错误：
  /*module.exports = {
    devServer: {
        overlay: {
            warnings: true,
            errors: true
        }
    }
  }*/
//在开发和生产构建下都会被启用。如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置：

/*module.exports = {
    lintOnSave: process.env.NODE_ENV !== 'production'
  }*/
  configureWebpack: {
  /*webpack配置，Type: Object | Function
    如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
    如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。简单的配置方式
    调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：
    
    module.exports = {
      configureWebpack: {
        plugins: [
          new MyAwesomeWebpackPlugin()
        ]
      }
    }
    该对象将会被 webpack-merge 合并入最终的 webpack 配置。
    警告
    有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。
    如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：
    module.exports = {
      configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
        } else {
          // 为开发环境修改配置...
        }
      }
    }*/
    resolve: { // 配置路径快捷方式
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@images': path.resolve(__dirname, 'src/assets/images'),
        '@fonts': path.resolve(__dirname, 'src/assets/fonts'),
      },
    },
    devtool: 'source-map',
    plugins: [ // git信息配置
      new webpack.DefinePlugin({
        __LOG_COMMIT_SHA__: JSON.stringify(repoInfo.sha), // 提交记录
        __LOG_VERSION__: JSON.stringify(repoInfo.lastTag), // tag版本
        __LOG_COMMITS_SINCE_RELEASE__: JSON.stringify(repoInfo.commitsSinceLastTag), // 版本是否超前
        __LOG_ENVIRONMENT__: JSON.stringify(process.env.NODE_ENV), // 环境
        __LOG_COMPILE_TIME__: JSON.stringify(Date.now()), // 时间
      }),
    ]
  },
  devServer: {// webpack-dev-server 相关配置
    hotOnly: true, // 热更新
    open: true, // 是否打开浏览器
    proxy: { 配置代理
      '/api/it': {
        target: 'http://xxx.xxx.xx.xxx:xxxx',
        logLevel: 'debug',
        pathRewrite: {
          '^/api/it': ''
        },
        ws: true,
        onProxyRes(proxyRes) {
          proxyRes.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate';
        },
      },
      '/api/sps': {
        // target: 'http://xxx.xxx.xx.xxx:xxxx',
        target: 'http://xxx.xxx.xx.xxx:xxxx',
        logLevel: 'debug',
        pathRewrite: {
          '^/api/sps': ''
        },
        onProxyRes(proxyRes) {
          proxyRes.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate';
        },
      },

    },
  },
  pluginOptions: { // 第三方插件
    foo: {
      // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
    }
  }
};

git-repo-info

https://www.npmjs.com/package/git-repo-info

npm i git-repo-info

var getRepoInfo = require('git-repo-info');
 
var info = getRepoInfo();
 
info.branch               // current branch
info.sha                  // current sha
info.abbreviatedSha       // first 10 chars of the current sha
info.tag                  // tag for the current sha (or `null` if no tag exists)
info.lastTag              // tag for the closest tagged ancestor
                          //   (or `null` if no ancestor is tagged)
info.commitsSinceLastTag  // number of commits since the closest tagged ancestor
                          //   (`0` if this commit is tagged, or `Infinity` if no ancestor is tagged)
info.committer            // committer for the current sha
info.committerDate        // commit date for the current sha
info.author               // author for the current sha
info.authorDate           // authored date for the current sha
info.commitMessage        // commit message for the current sha
info.root                 // root directory for the Git repo or submodule
                          //   (if in a worktree, this is the directory containing the original copy)
info.commonGitDir         // directory containing Git metadata for this repo or submodule
                          //   (if in a worktree, this is the primary Git directory for the repo)
info.worktreeGitDir       // if in a worktree, the directory containing Git metadata specific to
                          //   this worktree; otherwise, this is the same as `commonGitDir`.

在上面vue.config.js配置好自己需要的信息，然后在constants文件里写好常量

export const LOG = Object.freeze({
  environment: __LOG_ENVIRONMENT__,
  version: __LOG_VERSION__,
  commitsSinceRelease: __LOG_COMMITS_SINCE_RELEASE__,
  compileTime: __LOG_COMPILE_TIME__,
  commitSha: __LOG_COMMIT_SHA__
});

在main.js引入，打印自己想要的信息

import moment from 'moment';
import { LOG } from '@/constants';
// console.group('版本号')
console.info(`XXX，运行在 ${LOG.environment} 环境，编译时间：${moment(LOG.compileTime).format()}`)
console.info(`最后提交：${LOG.commitSha}${LOG.commitsSinceRelease ? `，超前发布版本 ${LOG.commitsSinceRelease} 个提交` : ''}`)

 

知其雄，守其雌，为天下谿。

为天下谿，常德不离，复归于婴儿。

知其白，守其黑，为天下式。

为天下式，常德不忒，复归于无极。

知其荣，守其辱，为天下谷。

为天下谷，常德乃足，复归于朴。

朴散则为器，圣人用之，则为官长，故大制不割。