vue脚手架增加自动打入环境变量publicPath、baseUrl等功能

前言：

公司toB的业务偏多，登录模块、路由模块、布局、样式基本都是统一的

目前我已经抽离出大多数可以重复使用的布局、vuex、store等模块、并基于 elementUI 进行了修改迭代，分别维护了 ip-vue2-admin、 ipharmacare-ui 项目（注：外网演示的仅是参考项目，仅学习使用），减少了很多重复的工作量，特别对于ui定义化的统一样式，通过外部变量修改的方式已经远远达不到ui的效果，我基于源码（增加内置变量、修改内置变量、直接修改组件内部样式等方式）去维护了一些统一化的样式（基于默认大小）

基于 ip-vue2-admin 项目，我准备着手做一个内置的脚手架，目前我还不需要按需引入等功能，所以基本 package.json 的内容都是一致的，目前做的是基于vue2、vue3项目分别去选择克隆不同的项目

/** 
createProject.js
*/
const answer = await inquirer.prompt([
    {
      name: "vueVersion",
      type: "list",
      message: "请选择 Vue 版本:",
      choices: ["Vue 2", "Vue 3"],
    },
  ]);

  if (answer.vueVersion === "Vue 2") {
    await createVue2Project(appName);
  } else {
    await createVue3Project(appName);
  }

同时我限定了项目名称的结构，因为公司都是以 web-xx 这种作为项目名称的，同时规范了打包后的文件名和映射路径（ publicPath ）也叫xx、拦截器也是叫xx（ baseUrl ）

/** 
createProject.js
*/  
  do {
    appName = await inquirer
      .prompt([
        {
          name: "appName",
          type: "input",
          message: "请输入项目名称 (必须以 'web-' 开头):",
          validate: function (input) {
            if (!input.startsWith("web-")) {
              return "项目名称必须以 'web-' 开头。请按照规范命名。";
            }
            return true;
          },
        },
      ])
      .then((answers) => answers.appName);
  } while (!appName);

基于以上规范的 publicPath 、 baseUrl 、 gitlab 打包后 Cl/CD 的 MOUDLE_NAME 、.gitignore 排除文件xx.zip、xx，例如项目叫web-admin，以上变量都是admin，我就在想每次创建项目去改这些实在太麻烦了，有没有更方便的方式

gitlab 的 CI/CD :应为这个我之前改过打包注入分支版本，所以大概知道一些变量 CI_PROJECT_NAME 就是项目的名称，切割掉web就是线上打包后的包名

/** 
.gitlab-ci.yml 关键代码
*/
before_script:
  # 业务系统打包遵循 项目名称截取'web-'规范
  - if [[ ${CI_PROJECT_NAME} =~ ^web- ]]; then export MOUDLE_NAME="${CI_PROJECT_NAME#web-}"; else export MOUDLE_NAME="${CI_PROJECT_NAME}"; fi

.gitignore 的文件名不好添加进去，没有找到合适的方法，索性我直接脚手架打进去

/** 
gitignoreGenerator/index.js 
*/
const fs = require("fs");

// Function to generate and write .gitignore file
module.exports = function generateGitignoreFile (appName) {
  const gitignoreContent = `.DS_Store
node_modules/
dist/
${appName.replace(/^web-/, '')}/
${appName.replace(/^web-/, '')}.zip
admin/
admin.zip
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
tests/**/coverage/
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
`;

  fs.writeFileSync(`${appName}/.gitignore`, gitignoreContent);
};

publicPath 、 baseUrl 此类的我想通过打入环境变量，项目中直接引入环境变量的方法更合理些，以下通过fs模块分别创建了 .env.development 、 .env.production 、.env.staging 环境变量

// envConfigGenerator/index.js
const fs = require("fs");

// Function to generate and write environment variable files
module.exports = function generateEnvFiles(appName) {
  const envConfig = {
    development: {
      ENV: '"development"',
      VUE_APP_BASE_API: '"/dev-api"',
      VUE_CLI_BABEL_TRANSPILE_MODULES: true
    },
    production: {
      ENV: '"production"',
      VUE_APP_BASE_API: '"/prod-api"',
      VUE_APP_BASE_NAME: `"${appName.replace(/^web-/, '')}"`
    },
    staging: {
      NODE_ENV: '"production"',
      VUE_APP_BASE_API: '"/stage-api"',
      VUE_APP_BASE_NAME: `"${appName.replace(/^web-/, '')}"`
    }
  };

  for (const env in envConfig) {
    if (envConfig.hasOwnProperty(env)) {
      const config = envConfig[env];
      const envFileName = `.env.${env}`;
      const envFileContent = Object.keys(config)
        .map((key) => `${key} = ${config[key]}`)
        .join("\n");
      fs.writeFileSync(`${appName}/${envFileName}`, envFileContent);
    }
  }
};

主要看生产环境VUE_APP_BASE_NAME就是项目中自动生成的环境变量，以下的 vue.config.js 中就是文件映射和打包后文件赋值给了环境变量，baseUrl也是同理不重复举例了，别忘了404界面如果写了返回，开发环境返回的也应该是 publicPath

const publicPath = process.env.VUE_APP_BASE_NAME ? `/${process.env.VUE_APP_BASE_NAME}/` : '/'
module.exports = {
  publicPath: publicPath,
  outputDir: process.env.VUE_APP_BASE_NAME,
}

目前该脚手架功能较少，且还在demo阶段，仅供学习使用

源码 ip-vue-cli

转载注明来源 YoungDo的博客