vue之配置生产环境和开发环境的打包命令及版本自动更新

---

前言

在开发过程中，总会遇到线上功能已经在使用的过程中要开发一些新的功能，而这些功能可能会影响已上线功能，这时候需要另辟一个环境用来测试；而且每个环境还要作区分，每次打包的版本都不一样；那么这篇文章就正好可以看看了。

---

1.在与src同级目录下新建.env.development（开发）和.env.production（生产）文件

2. 在.env.development文件中写入

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'https://xxx/test' //开发环境域名
VUE_APP_VERSION= 0.0.2//开发环境版本号

3. 在.env.production文件中写入

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://xxx' //生产环境域名
VUE_APP_VERSION= 0.0.1//生产环境版本号

4. 在package.json文件中配置打包命令

	"scripts": {
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build",
		"build:dev": "vue-cli-service build --mode development",
		"lint": "vue-cli-service lint"
	},

5. 在vue.config.js文件中配置版本号更新

const { defineConfig } = require('@vue/cli-service')
const fs = require('fs');
module.exports = defineConfig({
  publicPath:'./',
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
        less: {
            lessOptions: {
                modifyVars: {
                    'primary-color': '#ec6800'
                },
                javascriptEnabled: true,
            },
        },
    },
  },
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development') {
      config.plugin('define').tap((args) => {
        const env = args[0]['process.env'];
        const version = getVersion();
        env.VUE_APP_VERSION = JSON.stringify(version);
        return args;
      });
    }
  }
})
function getVersion() {
  const envFile = process.env.NODE_ENV === 'production' ? '.env.production' : '.env.development';
  const envContent = fs.readFileSync(envFile, 'utf8');
  const version = envContent.match(/VUE_APP_VERSION=(.*)/)[1];
  const newVersion = incrementVersion(version);
  updateVersion(envFile, newVersion);
  return newVersion;
}

function incrementVersion(version) {
  const parts = version.split('.'); // 将版本号拆分为部

  // 将每部分转换为数字
  const major = parseInt(parts[0]);
  const minor = parseInt(parts[1]);
  const patch = parseInt(parts[2]);

  if (patch < 9) {
    // 如果 patch 小 9，则递增 patch 部分
    parts[2] = (patch + 1).toString();
  } else if (minor < 9) {
    // 如果 patch 达到 9，但 minor 小于 9，则将 patch 重置为 0，递增 minor
    parts[1] = (minor + 1).toString();
    parts[2] = '0';
  } else {
 // 如果 patch 和 minor 都达到 9，则将它们重置为 0，递增 major
    parts[0] = (major + 1).toString();
    parts[1] = '0';
    parts[2] = '0';
  }

  return parts.join('.'); // 将部分合并为的版本号
}
const getPackageJson = () => {
  let data = fs.readFileSync('./package.json') //fs读取文件
  return JSON.parse(data) //转换为json对象
}

function updateVersion(envFile, newVersion) {
  const envContent = fs.readFileSync(envFile, 'utf8');
  const updatedContent = envContent.replace(/VUE_APP_VERSION=(.*)/, `VUE_APP_VERSION=${newVersion}`);
  fs.writeFileSync(envFile, updatedContent, 'utf8');

  let packageData = getPackageJson()
  packageData.version = newVersion
  fs.writeFile('./package.json', JSON.stringify(packageData, null, '\t'), err => {
    if (err) {
      console.log('写入失败', err)
    } else {
      console.log('写入成功 ' + packageData.version)
    }
  })
}

npm run build 打包生产环境命令

npm run build:dev 打包开发环境命令

总结

执行打包命令会自动更新版本号，执行npm run build:dev更改的地方有.env.development文件中的VUE_APP_VERSION和package.json文件中的version，执行npm run build更改的地方有.env.production文件中的VUE_APP_VERSION和package.json文件中的version。