vite import插件

Posted 2023-04-03 LeoShi2020

# 安装组件
pnpm install -D unplugin-vue-components unplugin-auto-import

# 修改配置文件
// vite.config.ts
import  defineConfig  from \'vite\'
import AutoImport from \'unplugin-auto-import/vite\'
import Components from \'unplugin-vue-components/vite\'
import  ElementPlusResolver  from \'unplugin-vue-components/resolvers\'

export default defineConfig(
  // ...
  plugins: [
    // ...
    AutoImport(
      resolvers: [ElementPlusResolver()],
      imports:[\'vue\',\'vue-router\']
    ),
    Components(
      resolvers: [ElementPlusResolver()],
    ),
  ],
)

# 不用导入也可以使用ref
import  ref  from \'vue\'

vite 动态 import 引入打包报错解决方案

参考技术A

之前一直是使用 webpack 构建项目， 但是那种随着项目越来越大 运行、打包、热更新缓慢 带来的无奈。。。

新项目开发果断使用了 vite2.0 , 和 webpack 对比起来， 其他的优点不是很直观，但在 运行、打包、热更新 方面简直倍数差距， 只能说我觉得 vite2.0 很舒服。

当然 vite 作为热门构建共建优点还是很多的，详情可以去官网看看 vite 官网地址

之前使用 webpack 构建项目一直使用动态导入 require.context API 自动化注册组件及路由；

转移到 vite 之后，开发习惯当然不能变；随即使用的是 import.meta.globEager 完成动态导入；

本地开发过程中很舒服没问题，打包后部署到服务器报错找不到动态导入的文件；裂开~~~

经过这几天陆陆续续的尝试最终解决，总结了以下几种方案

主要项目结构

文件内部

组件内部通过定义

vite 动态导入有两种方式

以下方案有需要自行取舍

使用 import.meta.glob

缺点：

但是你可以用单独文件夹来区分，我认为限制性太大不够优雅；

使用 router.ts

使用 import.meta.glob 和 import.meta.globEager

使用 router.ts （路由注册）

使用 main.ts （组件注册）

使用 import.meta.glob 的 then 方法， 加上路由内置 addRoute（） 方法注册
缺点：

使用 router.ts