vue-press 根据环境变量打包生成不一样的文档

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

需求是：根据环境变量生成不一样的dist包

1.在package.json配置文件里的 scripts里添加不一样的值，例如

 "scripts": {
    "dev": "vuepress dev docs",
    "dev:scgp": "cross-env BUILD_TYPE=scgp vuepress dev docs",
    "build": "vuepress build docs",
    "build:scgp": "cross-env BUILD_TYPE=scgp vuepress build docs"
  },

dev是启动之前的项目，dev:scgp是根据 BUILD_TYPE=scgp 变量来启动对应项目， build是打包之前的项目，build:scgp一样也是根据BUTLD_TYPE变量打包的。

2.在config.js全局配置文件里使用process.env.BUILD_TYPE去获取环境变量值存进themeConfig里

const themeConfig = require("./config/themeConfig.js");
const vars = require("./config/var")

//通过环境变量区分scg/scgp;
themeConfig.isScgp = process.env.BUILD_TYPE === 'scgp';
const BUILD_TYPE = process.env.BUILD_TYPE || 'scg';
themeConfig.vars = vars[BUILD_TYPE]

vars引用的资源是.vuepress/config/var.js，这个js文件里主要存放的是全局的变量，当编译或者打包的环境变量是scg时就取scg对象的值，当环境变量是scgp时，就取scgp对象里的值，var.js 的代码示例如下：

module.exports = {
    scg: {
        name: 'a'
    },
    scgp: {
        name: 'b'
    }
}

3.在md文件使用全局变量的话直接是{{ $themeConfig.vars.name }}即可生效，每次编译或打包都是根据scg或者scgp变量来进行读取变量的。注意：ma文件中变量在代码块中是直接当字符串处理的，这时候需要单独去处理。

总结：vue-press是单页面应用，它主要就是为了写vue的文档。它生成的每个页面都是预渲染html，因这个项目需求是为了方便，不重新写两篇技术文档，只更改了其中的变量。代码不会那么冗余。同时也实现了一套代码可以根据不同的环境变量打包的命令去部署在不同的服务器上。