项目背景首先介绍一下我个人的开源项目X-BUILD，它是一个前端脚手架。从2017年2月到现在已经4年多了，目前我正在针对vue3做一个全新的版本，全面使用Vite作为构建工具，把过程中遇到的一些坑和优势分享给大家。另外，如果你有兴趣尝试我的脚手架，可以参考文档。Vite迁移指南刚开始开发v6.0版本的时候，我对Vite了解不多，所以模板的基础搭建还是使用Vue-CLI4.5。在之后的开发过程中，我逐渐对Vite有了更多的了解，有很多新特性非常好，所以从v6.1开始，我全面迁移到Vite2作为模板构建工具。ESLintVite目前不提供灵活的配置选项。默认创建的项目不支持自动配置ESLint功能，需要手动配置。这也是我迁移时间最多的部分。在awesome-vite中找到了一个配置ESLint的插件——vite-eslint，但是不知道如何配置要使用的Airbnb方案，所以这部分还是采用手动配置。ESLint相关依赖eslint@7.32.0eslint-config-airbnb-base@14.2.1(ESLintpluginforAirbnbbaserules)eslint-plugin-import@2.24.2eslint-plugin-vue"@7.17.0Prettier相关依赖prettier@2.3。2eslint-config-prettier@8.3.0eslint-plugin-prettier@4.0.0ESLint规则与Prettier规则冲突，eslint-config-prettier插件是禁用所有与格式相关的ESLint规则，即控制格式规则由Prettier来处理。配置文件.eslintrc.jsmodule.exports={env:{browser:true,es2021:true,node:true,},extends:['plugin:vue/vue3-essential','airbnb-base','plugin:prettier/recommended'],parserOptions:{ecmaVersion:12,parser:'@typescript-eslint/parser',sourceType:'module',},plugins:['vue','@typescript-eslint'],规则:{'import/no-unresolved':'off','import/extensions':'off','import/no-absolute-path':'off','import/no-extraneous-dependencies':'off','vue/no-multiple-template-root':'off','no-param-reassign':['error',{道具:true,ignorePropertyModificationsFor:['state','config'],},],},settings:{},};复制代码.prettierrc{"useTabs":false,"tabWidth":2,"printWidth":88,"singleQuote":true,"trailingComma":"all","bracketSpacing":true,"semi":true}把代码复制到这里，ESLint就可以正常使用了。如果有特殊需求，可以在配置文件中手动添加Rules。Stylelint虽然已经打算全面拥抱Tailwind.css，但难免有些情况下需要单独使用CSS来实现，所以一个标准的编码风格验证就显得尤为重要。相关依赖stylelint@13.13.1stylelint-config-standard@22.0.0(Stylelint的推荐配置)stylelint-config-prettier@8.0.2stylelint-config-recess-order@2.5.0(属性排序)Stylelint与ESLint类似，两者与Prettier规则有冲突，stylelint-config-prettier可以解决这些冲突。配置文件module.exports={extends:['stylelint-config-standard','stylelint-config-prettier','stylelint-config-recess-order',],plugins:['stylelint-scss'],rules:{//...},};如果你使用Sass/Scss，你需要安装插件stylelint-scss。Tailwind.cssTailwind现在的评论褒贬不一。亲身试用后，觉得还是不错的。在团队中也得到了提升，成为了团队技术栈的一部分。目前项目中使用的是Postcss兼容模式。虽然用的是v2.2版本，但是无法使用JIT模式。这是因为@vue/cli4.5之前的版本目前使用的是Postcss7，升级比较麻烦，或者等待@vue/cli5.0版本（目前是beta）。不过vite2刚好用的是Postcss8，所以问题就解决了。JIT模式TailwindCSS2.0正式推出Just-in-Time（简称JIT）编译器，可以在编写HTML时及时编译CSS，大大缩短编译时间，减小生成文件的体积。它具有以下特点：超快的编译时间：原来的TailwindCLI编译需要3-8秒，但在JIT模式下只需要0.8秒。直接使用anyVariants：不用担心是否开启active、focus或disabled等。任意值CSSclass：直接在HTML中写一个类似h-[13px]的class，它会自动生成。开发环境和生产环境编译相同的CSS：不用担心上线后类会不会神奇消失。相关依赖vitawind@1.2.8Vitawind是一个可以在Vite上通过几步安装和配置TailwindCSS的工具。可以根据官网快速配置配置文件，也可以手动配置：创建src/styles/tailwind.css文件@tailwindbase;@tailwindcomponents;@tailwindutilities;复制代码，在main.ts中引入：import'@/styles/tailwind.css';复制代码在根目录创建tailwind.config.js：module.exports={mode:'jit',purge:['index.html','./src/**/*.{js,jsx,ts,tsx,vue,html}'],darkMode:false,//or'media'or'class'theme:{extend:{},},plugins:[],}复制代码中的这一点，Tailwind可以在项目中正常使用。JIT模式太好吃了，建议大家真正尝试一段时间后再对Tailwind做出客观的评价。元件库自动导入你是否还在按照下面的步骤加载元件库中的一些元件？通过import{***}from'***'加载一些组件。使用Vue.use(***)加载组件。导入组件库样式文件。如果做按需加载，还需要使用babel插件支持。如果是这样，那我建议你换成另一种更方便的方式unplugin-vue-components。功能支持开箱即用的Vue2和Vue3。支持Vite、Webpack、VueCLI、Rollup。Tree-shakable，只注册你使用的组件。文件夹名称充当命名空间。完整的TypeScript支持。流行的UI库的内置解析器。组件库支持支持市面上常见的组件库：AntDesignVueElementPlusElementUIHeadlessUIIDuxNaiveUIPrimeVueVantVEUIVarletUIViewUIVuetifyVueUse组件相关依赖unplugin-vue-components@0.14.9配置文件importComponentsfrom'unplugin-vue-components/vite';importViteComponents,{AntDesignVueResolver,ElementPlusResolver,VantResolver,}来自'unplugin-vue-components/resolvers'//vite.config.tsplugins:[Components({resolvers:[AntDesignVueResolver(),ElementPlusResolver(),VantResolver(),]})]不手动引入组件直接复制代码是不是很香？环境变量的开发过程通常分为三个步骤，development（开发），staging（生产前测试），production（生产）。不同的环境使用不同的变量和封装方式，这也是Vite支持的。但是和Webpack有些差异：process.env.VUE_APP_BASE_URL//webpackimport.meta.env.BASE_URL//vitecopycodeWebpack和Vite获取环境变量的方式不同。.env文件的用法是一致的。vite支持TypeScriptintellisense，需要在env.d.ts中配置。别名配置Vite创建的项目不能直接使用别名。例如@运算符代表src，可以通过如下配置实现：//vite.config.tsresolve:{alias:{'@':resolve(__dirname,'./src'),},},copycodeSVGicon图标一直使用svg方案，项目中的svg文件是通过svg-sprite-loader加载的，但是这个loadervite不能用，所以我们采用另一种方案：相关依赖vite-plugin-svg-icons@1.0.4配置文件//vite.config.tsplugins:[viteSvgIcons({iconDirs:[resolve(process.cwd(),'src/assets/icons')],symbolId:'icon-[dir]-[name]',}),]复制代码在main.ts中引入import'virtual:svg-icons-register';复制代码组件手写一个全局组件，调用方便，支持文件夹，颜色配置。
