vite+ts 必备配置

本问持续更新请关注... 关注博主，c v大法不迷路

Starter、大招一个工具网站，一个聚合网址分享给大家

JuTool.dev | 程序员工具站

优聚集公开导航

一、全局@路径配置

• 目标文件

  vite.config.ts

• 代码

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import * as path from 'path' // 别名必备引入文件
   // https://vitejs.dev/config/
   export default defineConfig({
     resolve: {
       alias: {
         '@':  path.resolve(__dirname, './src') ////这里必须安装一个依赖 yarn add @types/node@16.13.0 -D
       },
     },
     plugins: [vue()]
   })
  

• 效果

  

• 说明

vite 不够贴心，想念cli

二、router-vue 花式玩法

• 目标文件 router/index.ts

• 代码

   import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
   ​
   const routes:RouteRecordRaw[] = [
       {
           path: '/',
           name: 'index',
           redirect: {name: 'product'}
       }
   ]
   // vite2 新语法特性
   const modules = import.meta.globEager('./module/**/*.ts')
   for (const path in modules) {
       routes.push(...modules[path].default)
   }
   ​
   const router = createRouter({
       history: createWebHistory(),
       routes:routes,
   })
   ​
   export default router
  

• 效果

  其实效果就是把routes分散开来便于管理,此方法一劳永逸！

  

• 说明

import.meta.globEager('./module/**/*.ts')这个方法可以自动遍历所有的路由routes[]

\