Vite 工程化配置优化开发体验

前言

使用 Vite 开发，在项目启动和热更新方面，确实感觉非常的丝滑，不过应用在团队项目开发，还需要进行工程化配置，提升开发效率和体验感

UI 库按需导入

unplugin-vue-components Vite 插件将组件库导出为独立包，实现按需加载

以导入 element-plus 组件库为例

yaml 复制代码

npm i unplugin-vue-components -D

Vite 的配置

js 复制代码

//vite.config.js
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver} from 'unplugin-vue-components/resolvers'
 
export default defineConfig （{
  plugins: [
    Components({
      dts: false, // 不生成 components.d
      resolvers: [ElementPlusResolver({ importStyle: false })]
    }),
  ]
}）

当你使用 unplugin-vue-components 来引入 ui 库的时候，message, notification，toast 等引入样式不生效

安装 vite-plugin-style-import ，实现 message, notification，toast 等引入样式自动引入

YAML 复制代码

npm i vite-plugin-style-import -D

JS 复制代码

import styleImport, {
  ElementPlusResolve,
} from 'vite-plugin-style-import'


export default  ({ mode }) => defineConfig({
  plugins: [
    styleImport({
      resolves: [
        ElementPlusResolve(),
      ],
    })
  ]
})

API 自动导入

Vue3 等插件 hooks 自动引入，使用 unplugin-auto-import，支持 vue, vue-router, vue-i18n, @vueuse 等自动引入

js 复制代码

// 引入前
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

//引入后
const count = ref(0)
const doubled = computed(() => count.value * 2)

安装

yaml 复制代码

npm install unplugin-auto-import -D

js 复制代码

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    // 全局引入插件
    AutoImport({
      // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
      dts: 'src/auto-imports.d.ts',
      imports: [
        // presets
        'vue',
        'vue-router',
        // custom
        {
          '@vueuse/core': [
            // named imports
            'useMouse', // import { useMouse } from '@vueuse/core',
            // alias
            ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
          ],
          'axios': [
            // default imports
            ['default', 'axios'], // import { default as axios } from 'axios',
          ],
          '[package-name]': [
            '[import-names]',
            // alias
            ['[from]', '[alias]'],
          ],
        },
      ]
    })
  ]
})

解决 unplugin-auto-import eslint 报错，配置 eslintrc 属性，生成 .eslintrc-auto-import.json 文件

js 复制代码

export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver()],
			eslintrc: {
				enabled: true, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
				filepath: './.eslintrc-auto-import.json', // 生成json文件
				globalsPropValue: true,
			},
		})
	]
});

生成配置文件之后，将其导入 eslintrc.js 即可，最后把 enable 改成 false 关掉

js 复制代码

// .eslintrc.js
module.exports = {
  extends: [
    './.eslintrc-auto-import.json',
    'plugin:vue/vue3-essential', 
    '@vue/standard'
  ]
}

自动重启 vite 服务

使用 vite-plugin-restart 插件，监听 vite.config.js 或 .env.development 等配置文件修改直接生效，不需要反复重启 Vite

安装 npm i vite-plugin-restart -D

配置 vite.config.js

js 复制代码

import ViteRestart from 'vite-plugin-restart'
export default {
  plugins: [
    ViteRestart({
      restart: [
        'my.config.[jt]s'
      ]
    })
  ],
}

setup 语法糖 name 增强

Vue3 语法糖默认是没有 name 属性的，使用 keep-alive 的时候需要用到 name

使用 vite-plugin-vue-setup-extend，不用写两个 script 标签，可以直接在 script 标签上定义 name

js 复制代码

import { defineConfig} from 'vite'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
export default  ({ mode }) => defineConfig({
  plugins: [
    vueSetupExtend()
  ]
}

使用

html 复制代码

<script setup name="home">
</script>

自动导入图片

每次使用图片都得 import，可以借助 vite-plugin-vue-images 来实现自动导入图片

YAML 复制代码

npm i vite-plugin-vue-images -D

配置

js 复制代码

// vite.config.ts
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'
 
export default defineConfig({
  plugins: [
    ViteImages({
      dirs: ['src/assets/image'] // 指明图片存放目录
    })
  ]
})

模板使用

html 复制代码

<template>
  <!-- 直接使用 -->
  <img :src="Logo" />
</template>
 
<script lang="ts" setup>
// import Logo from '@/assets/image/logo.png'
</script>

SVG 组件

vite-plugin-svg-icons 根据指定目录，合成雪碧图

js 复制代码

import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
const path = require("path");
export default  ({ mode }) => defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/svg')],
      symbolId: 'icon-[dir]-[name]'
    })
  ]
})

main.JS 添加注册才生效

JS 复制代码

import 'virtual:svg-icons-register'

编写 svgIcon.vue 组件

HTML 复制代码

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :href="symbolId" />
  </svg>
</template>

<script setup lang="ts" name="SvgIcon">
  import { computed } from 'vue'
  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon'
    },
    name: {
      type: String,
      required: true
    },
  })
  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style scope>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.1em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
    overflow: hidden;
  }
</style>

CSS 原子化框架

安装 tailwindcss 及其必要的依赖

js 复制代码

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

新建两个配置文件 tailwind.config.js 和 postcss.config.js

配置 tailwind.config.js

js 复制代码

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  // 这部分 css 需要通过比较复杂的计算得出，所以要用 `safelist` 保证它们出现在最终 css 里
  safelist: [
    {
      pattern: /w-\d+\/\d+/,
    },
    {
      pattern: /grid-cols-[5-9]/,
    },
  ],
}

配置 postcss.config.js

JS 复制代码

// postcss.config.js
// 从中你可以看到，Tailwind CSS 的编译能力是通过 PostCSS 插件实现的
// 而 Vite 本身内置了 PostCSS，因此可以通过 PostCSS 配置接入 Tailwind CSS 
// 注意: Vite 配置文件中如果有 PostCSS 配置的情况下会覆盖掉 post.config.js 的内容!
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

在项目的入口 CSS 中引入必要的样板代码

CSS 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

支持 TypeScript

安装 Typescript

yaml 复制代码

npm i typescript -D

在项目根目录下创建 TypeScript 的配置文件 tsconfig.json

tsconfig.json 配置

json 复制代码

{
  "compilerOptions": {
    "target": "ESNext", // 将代码编译为最新版本的 JS
    "module": "ESNext", // 使用 ES Module 格式打包编译后的文件
    "moduleResolution": "node", // 使用 Node 的模块解析策略
    "lib": ["ESNext", "DOM", "DOM.Iterable"], // 引入 ES 最新特性和 DOM 接口的类型定义
    "skipLibCheck": true, // 跳过对 .d.ts 文件的类型检查
    "resolveJsonModule": true, // 允许引入 JSON 文件
    "isolatedModules": true, // 要求所有文件都是 ES Module 模块。
    "noEmit": true, // 不输出文件,即编译后不会生成任何js文件
    "jsx": "preserve", // 保留原始的 JSX 代码，不进行编译
    "strict": true, // 开启所有严格的类型检查
    "noUnusedLocals": true, //报告未使用的局部变量的错误
    "noUnusedParameters": true, //报告函数中未使用参数的错误
    "noFallthroughCasesInSwitch": true, //确保switch语句中的任何非空情况都包含
    "esModuleInterop": true, // 允许使用 import 引入使用 export = 导出的内容
    "allowJs": true, //允许使用js
    "baseUrl": ".", //查询的基础路径
    "paths": { "@/*": ["src/*"], "#/*": ["types/*"] } //路径映射,配合别名使用
  },
  //需要检测的文件
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }] //为文件进行不同配置
}

src 目录下新加 shim.d.ts 文件

JS 复制代码

/* eslint-disable */
import type { DefineComponent } from 'vue'

declare module '*.vue' {
  const component: DefineComponent<{}, {}, any>
  export default component
}

为 Typescript 提供 eslint 支持

YAML 复制代码

npm install eslint eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

创建 .eslintrc 文件，注意不要用 js 后缀，否则 vscode 的 eslint 插件无法工作

JS 复制代码

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["vue", "@typescript-eslint"],
  "rules": {
    // 允许使用 any 类型
    "@typescript-eslint/no-explicit-any": "off"
  }
}