自动路由和自动导入功能配置

2024-06-04 · 7 min read

在写自己的一个 Vite+Vue 项目时，考虑加入自动路由和自动导入功能。分别使用插件：unplugin-vue-router 和 unplugin-auto-import。

unplugin-vue-router 实现自动路由

自动路由要达到的效果是：无需手动添加路由路径，而是根据文件路径自动生成路由配置。这里以 Vite 项目为例，安装好插件后，在 vite.config.ts 中配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入 vite 适配插件
import VueRouter from 'unplugin-vue-router/vite'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [VueRouter(), vue()] // VueRouter 插件必须放在 Vue 插件之前
})

如果是 Typescript 项目，运行项目后，会在项目中自动生成一个 typed-router.d.ts文件，这个文件在后续开发中会自动生更新路由映射类型，为防止 ts 报错，所以需要将这个文件引入到 tsconfig.json 文件中，同时需要将 moduleResolution 项设置为 bundler ：

{
  "include": [
    // other files...
+    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    // ...
+    "moduleResolution": "bundler",
    // ...
  }
}

另外，如果项目中有 env.d.ts文件，例如 Vite + Typescript 创建的项目就会有 vite-env.d.ts文件，则需要添加类型到其中：

/// <reference types="vite/client" />
+ /// <reference types="unplugin-vue-router/client" />

配置完成后，需要修改 router.ts 文件，不再直接使用 vue-router 模块：

- import { createRouter, createWebHistory } from 'vue-router'
+ import {createRouter,createWebHistory} from 'vue-router/auto'
+ import {routes} from 'vue-router/auto-routes'

const router = createRouter({
  history:createWebHistory(),
-   routes: [
-     {
-       path: '/',
-       component: () => import('src/pages/Home.vue'),
-     }
-   ]
+   routes,
})

export default router

上面代码中的 routes 变成自动生成的，它是基于文件系统的，默认路由文件映射目录是 src/pages，测试创建 pages/index.vue文件，可以看到 typed-router.d.ts文件中，已自动生成路由的映射： typed-router.d.ts.png

排除目录

有些时候，pages目录中可能会有一些其他的非页面内容的目录，比如 components目录，我们不希望它生成路由映射。unplugin-vue-router 支持排除目录设置，在 exclude数组中，列出你不想要生成路由的文件即可：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueRouter from "unplugin-vue-router/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    VueRouter({
+      routesFolder: "src/pages",  // 这里可指定页面目录
+      exclude: ["src/pages/components/**/*.vue"], // 这里排除了pages目录中components目录文件的路由映射
    }),
    vue(),
  ],
});

至此，自动路由配置完成，更多配置功能，详见文档：configuration。

unplugin-auto-import 实现自动导入

自动导入要达到的效果是：使用过一些公共库或者是频繁导入使用的模块时，无需手动添加导入就可直接使用。还是 Vite 项目为例，安装插件后，在 vite.config.ts 中配置：

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
	plugins: [
		AutoImport({
			/* options */
		})
	]
})

想要自动导出模块，需要在插件中具体配置。不是所有的插件或库都支持自动导入，首先官方默认提供了一些预设 presets，在这个预设表中的插件，都可以直接配置成字符串即可。比如我希望自动导入 vue 和 vue-router中的方法，即可配置成：

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
	plugins: [
		AutoImport({
			imports: ['vue', 'vue-router']
		})
	]
})

此时如果是 Typescript 项目，运行项目后，会自动生成 auto-imports.d.ts文件，文件中会根据配置自动生成类型声明，防止 ts 报错，同样我们需要将此文件包含到 tsconfig.json 文件中：

{
  "include": [
    // other files...
+    "./auto-imports.d.ts"
  ],
}

观察 auto-imports.d.ts文件，会发现已经有vue和 vue-router的内置模块的类型声明了： typed-router.d.ts.png

现在使用 vue 模块开发时，就不需要再手动导入了：

<template>
  <div>{{ str }}</div>
</template>

<script setup lang="ts">
- import { ref } from "vue";
  const str = ref("hello world!");
</script>

结合 unplugin-vue-router 使用

如果使用的插件库不在官方预设内，有些插件会自己实现，例如 unplugin-vue-router。

在使用 unplugin-vue-router 时，我们不直接使用 vue-router，希望是自动导入插件中的方法，而此插件刚好也暴露了自己实现的自动导入预设，所以可修改配置如下：

port { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueRouter from "unplugin-vue-router/vite";
import AutoImport from "unplugin-auto-import/vite";
+ import { VueRouterAutoImports } from 'unplugin-vue-router'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    VueRouter({
      routesFolder: "src/pages",
      exclude: ["src/pages/components/**/*.vue"],
    }),
    vue(),
    AutoImport({
      imports: [
        "vue",
-        "vue-router",
+        VueRouterAutoImports
      ],
    }),
  ],
});

再查看auto-imports.d.ts文件，发现也已经有了对应方法的类型声明：

自动导入自己写的工具模块

有时候我们也希望可以将自己写的工具方法实现自动导入，好在插件中可以配置。举个例子，假设我们有一个 utils目录，其中有文件date.ts是封装了一些日期方法，有文件storage.ts文件封装了缓存方法，再来一个 index.ts作为入口文件：

export function getTime() {
	return new Date().getTime()
}

export function getStorage(key: string) {
	return localStorage.getItem(key) || sessionStorage.getItem(key)
}

export { getTime } from './date'
export { getStorage } from './storage'

这个时候，我们希望 utils目录中所有的方法都能自动导入，就可以配置 dirs项：

AutoImport({
	imports: ['vue', 'vue-router'],
	dirs: [
		'src/utils' // 配置工具类的目录即可
	]
})

配置完成后，观察 auto-imports.d.ts文件，可以发现所有的方法都已声明了类型，可以直接使用了。

#Vite