// 在package.json
"scripts": {
  "dev": "vite --mode mock",
  "dev:alpha": "vite --mode alpha",
  "dev:test": "vite --mode test",
  "dev:test1": "vite --mode test1",
  "dev:grey": "vite --mode grey",
  "build:test": "vue-tsc --noEmit && vite build --mode test",
  "build:test1": "vue-tsc --noEmit && vite build --mode test1",
  "build": "vue-tsc --noEmit && vite build --mode prod"
},

base:
  mode === 'prod'
    ? `${cdnConfig.host}${projectBasePath}`
    : mode === 'test'
    ? baseConfig.publicPath + '/'
    : mode === 'test1'
    ? baseConfig.publicPath + '/'
    : mode === 'grey'
    ? baseConfig.publicPath + '/'
    : './',

# 安装husky和lint-staged
yarn add -D husky lint-staged

# 安装commitlint
yarn add -D @commitlint/cli @commitlint/config-conventional commitizen conventional-changelog-cli cz-customizable

// pacakge.json
"scripts": {
  "prepare": "husky install",
  "lint": "npx lint-staged"
},
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.md": "prettier . -w",
  "*.{ts,tsx,js,vue}": "eslint . --fix",
  "*.{vue,css,scss,less,sass}": "stylelint --fix",
  "*": "prettier . -w -u"
},

// pacakge.json
"config": {
  "commitizen": {
    "path": "./node_modules/cz-customizable"
  },
  "cz-customizable": {
    "config": ".cz-config.js"
  }
}

// .cz-config.js
// 配置可以参考demo的配置，有注释
module.exports = {
  // type 类型
  types: [
    { value: 'feat', name: 'feat:     新增产品功能' },
    { value: 'fix', name: 'fix:      修复 bug' },
    { value: 'upd', name: 'upd:      update,更新某功能（不是 feat, 不是 fix' },
    { value: 'docs', name: 'docs:     文档的变更' },
    { value: 'release', name: 'release:     版本，打tag' },
    {
      value: 'style',
      name: 'style:    不改变代码功能的变动(如删除空格、格式化、去掉末尾分号等)'
    },
    {
      value: 'refactor',
      name: 'refactor: 重构代码。不包括 bug 修复、功能新增'
    },
    {
      value: 'perf',
      name: 'perf:     性能优化'
    },
    { value: 'test', name: 'test:     添加、修改测试用例' },
    {
      value: 'build',
      name: 'build:    构建流程、外部依赖变更，比如升级 npm 包、修改 webpack 配置'
    },
    { value: 'ci', name: 'ci:       修改了 CI 配置、脚本' },
    {
      value: 'chore',
      name: 'chore:    对构建过程或辅助工具和库的更改,不影响源文件、测试用例的其他操作'
    },
    { value: 'revert', name: 'revert:   回滚 commit' }
  ],

// scope 类型，针对 React 项目
  scopes: [
    // 如果选择 custom ,后面会让你再输入一个自定义的 scope , 也可以不设置此项， 把后面的 allowCustomScopes 设置为 true
    ['custom', '以下都不是？我要自定义,或者回车跳过此项'],
    ['components', '组件相关'],
    ['views', '页面相关'],
    ['utils', '工具函数相关'],
    ['apis', '接口对接相关'],
    ['layout', '调整layout和页面布局相关'],
    ['styles', '样式相关'],
    ['deps', '项目依赖'],
    ['other', '其他修改']
  ].map(([value, description]) => {
    return {
      value,
      name: `${value.padEnd(30)} (${description})`
    };
  }),

// allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\\d{1,5}',

// 可以设置 scope 的类型跟 type 的类型匹配项，例如: 'fix'
  /*
    scopeOverrides: {
      fix: [
        { name: 'merge' },
        { name: 'style' },
        { name: 'e2eTest' },
        { name: 'unitTest' }
      ]
    },
   */
  // 覆写提示的信息
  messages: {
    type: '请确保你的提交遵循了原子提交规范！\n选择你要提交的类型:',
    scope: '\n选择一个 scope (可选):',
    // 选择 scope: custom 时会出下面的提示
    customScope: '请输入自定义的 scope:',
    subject: '填写一个简短精炼的描述语句:\n',
    body: '添加一个更加详细的描述，可以附上新增功能的描述或 bug 链接、截图链接 (可选)。使用 "|" 换行:\n',
    breaking: '列举非兼容性重大的变更 (可选):\n',
    footer: '列举出所有变更的 ISSUES CLOSED  (可选)。 例如.: #31, #34:\n',
    confirmCommit: '确认提交?'
  },

// 是否允许自定义填写 scope ，设置为 true ，会自动添加两个 scope 类型 [{ name: 'empty', value: false },{ name: 'custom', value: 'custom' }]
  // allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  // skipQuestions: [],

// subject 限制长度
  subjectLimit: 100
  // breaklineChar: '|', // 支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true,
};

// vite配置,可以参考项目vite-plugin-vconsole的文档填写，兼容多环境情况
viteVConsole({
  entry: resolve(__dirname, './src/main.ts'),
  localEnabled: true,
  enabled:
    command !== 'serve' &&
    (mode === 'test' || mode === 'test1' || mode === 'alpha'),
  config: {
    maxLogNumber: 1000,
    theme: 'light'
  }
}),

legacy({
  // 不考虑ie的兼容性和老的vivo/锤子/荣耀等国产机型，则可以使用下面
  // targets: ['defaults', 'not IE 11', '> 0.25%, not dead'],
  // 如果考虑上面说的兼容性问题，使用下面配置
  targets: ['ie >= 11'],
  additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
  // 下面可以根据情况选用
  renderLegacyChunks: true,
  polyfills: [
    'es.symbol',
    'es.array.filter',
    'es.promise',
    'es.promise.finally',
    'es/map',
    'es/set',
    'es.array.for-each',
    'es.object.define-properties',
    'es.object.define-property',
    'es.object.get-own-property-descriptor',
    'es.object.get-own-property-descriptors',
    'es.object.keys',
    'es.object.to-string',
    'web.dom-collections.for-each',
    'esnext.global-this',
    'esnext.string.match-all'
  ],
  modernPolyfills: ['es.promise.finally']
})

viteMockServe({
  mockPath: 'mocks',
  supportTs: true,
  localEnabled: command === 'serve' && mode === 'mock',
  prodEnabled: false
  //  这样可以控制关闭mock的时候不让mock打包到最终代码内
  // injectCode: `
  //   import { setupProdMockServer } from './mockProdServer';
  //   setupProdMockServer();
  // `
}),

【前端工程化】Vite关于Vue3/React项目工程化总结（献给2021-1024的礼物）

https://blog.vadxq.com/article/vite-engineering-project/