Vite 2.0 配置总结

GitHub 仓库地址：github.com/vitejs/vite

Vite 官网地址：cn.vitejs.dev/

1. 环境变量配置

项目根目录新建，.env.production

• .env.development

NODE_ENV=development
  
VITE_APP_WEB_URL=YOUR WEB URL

• .env.production

NODE_ENV=production
  
VITE_APP_WEB_URL=YOUR WEB URL

在页面中使用

console.log(import.meta.env.VITE_APP_WEB_URL)

在 package.json 中使用

"scripts":{
  "build:dev": "vite build --mode development",
  "build:pro": "vite build --mode production"
}

2. PWA 配置

安装依赖 vite-plugin-pwa

yarn add --dev vite-plugin-pwa

配置 vite.config.ts 文件

import { VitePWA } from 'vite-plugin-pwa'

plugins:[
  ...
  VitePWA({
    manifest: {},
    workbox: {
      skipWaiting: true,
      clientsClaim: true
    }
  })
]

具体配置参考：github.com/antfu/vite-…

3. 组件样式按需加载配置

安装依赖 vite-plugin-style-import

yarn add --dev vite-plugin-style-import

以 ant-design-vue为例，配置vite.config.ts` 文件

import styleImport from 'vite-plugin-style-import'

css:{
  preprocessorOptions:{
    less:{
      modifyVars:{},
      javascriptEnabled: true
    }
  }
},
plugins:[
  styleImport({
    libs:[
      {
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: name => `ant-design-vue/es/${name}/style/index`
      }
    ]
  })
]  

具体配置参考：github.com/anncwb/vite…

4. webpack 代理配置

配置 vite.config.ts 文件

server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    https: false,
    proxy: {}
},

5. 生产环境移除 console

配置 vite.config.ts 文件

build:{
  ...
  terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
  }
}

6. 生产环境生成 .gz / .br文件

安装依赖

yarn add --dev vite-plugin-compression

配置 vite.config.ts 文件

import viteCompression from 'vite-plugin-compression'

plugins:[
  ...
  // gzip压缩
  new CompressionWebpackPlugin({
    filename: '[path][base].gz',
    algorithm: 'gzip',
    test: new RegExp(
      '\\.(' +
      ['js', 'css'].join('|') +
      ')$'
    ),
    threshold: 10240,
    minRatio: 0.8
  }),
  // brotli压缩
  new CompressionWebpackPlugin({
    filename: '[path][base].br',
    algorithm: 'brotliCompress',
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8
 })
]

具体配置参考：github.com/anncwb/vite…

7. 配置 eslint + standard

安装依赖

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-standard @vue/eslint-config-typescript eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-vue

项目根目录新建 .eslint.js 文件

配置参考如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-explicit-any': 'off'
  }
}

配置 package.json 文件

"scripts": {
  ...
  "lint:code": "eslint --fix src/**/*.{js,ts,tsx,vue}",
  ...
}

8. 配置 stylelint + standard

安装依赖

yarn add --dev stylelint stylelint-config-rational-order stylelint-config-standard stylelint-order

项目根目录新建 .stylelintrc.js 文件

参考配置如下：

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-rational-order'
  ],
  plugins: [
    'stylelint-order'
  ],
  rules: {
    'selector-pseudo-class-no-unknown': null,
    'no-descending-specificity': null,
    'at-rule-no-unknown': null,
    'font-family-no-missing-generic-family-keyword': null,
    'selector-type-no-unknown': null
  }

配置 package.json 文件

"scripts": {
  ...
  "lint:style": "stylelint --fix src/**/*.{vue,htm,html,css,sss,less,scss}",
  ...
}

9. 配置 git hooks + commitlint

安装依赖

yarn add --dev @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog husky lint-staged

项目根目录新建 .commitlintrc.js 文件

参考配置如下：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'subject-case': [0, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'build', // 构建
        'ci', // ci配置，脚本文件等更新
        'chore', // Other changes that don't modify src or test files. 改变构建流程、或者增加依赖库、工具等
        'docs', // Adds or alters documentation. 仅仅修改了文档，比如README, CHANGELOG, CONTRIBUTE等等
        'feat', // Adds a new feature. 新增feature
        'fix', // Solves a bug. 修复bug
        'perf', // Improves performance. 优化相关，比如提升性能、体验
        'refactor', // Rewrites code without feature, performance or bug changes. 代码重构，没有加新功能或者修复bug
        'revert', // Reverts a previous commit. 回滚到上一个版本
        'style', // Improves formatting, white-space. 仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑
        'test' // Adds or modifies tests. 测试用例，包括单元测试、集成测试等
      ]
    ]
  }
}

项目根目录 .husky 目录下新建 commit-msg pre-commit 文件

commit-msg 配置如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

pre-commit 配置如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

配置 package.json 文件

"scripts": {
  ...
  "commit": "git-cz",
  "postinstall": "husky install",
  ...
},
"lint-staged": {
  "src/**/*.{js,ts,tsx,vue}": [
      "eslint --fix"
    ],
    "src/**/*.{vue,htm,html,css,sss,less,scss}": [
      "stylelint --fix"
    ]
},
"config": {
  "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
}  

10. 项目别名配置

配置 vite.config.ts 文件

const path = require('path')
const resolve = (dir: string) => path.join(__dirname, dir)

resolve: {
	alias:{
		'@': resolve('src')
	}
}

未完待续，如有不足，望评论区留言。