如何使用vite构建明道云自定义视图前端开发环境并支持vue等

使用 vite 构建开发环境主要分两步

• 1、是如何构建开发环境
• 2、如何打包开发完的代码

其实开发环境比较简单哈，随便使用 npm create vite@latest 去下载一个 vite 模板（我使用的是 vue+ts 模板 ），然后加上一个自己去写的 vite 插件就可以搞定。因为在自定义视图的时候入口文件明确要的是

http://localhost:3000/bundle.js

那么我们就给去构建一个这样的插件，生成一个 bundle.js 文件

然后把这个插件挂载到 vite.config.js 的 plugin 里面

备注

这里插入代码会乱码，太难受了，上面插件里面里面有一个 src/main.ts 代表的是入口文件，如果是 js 环境就使用 src/main.js 哈

import prebundle from './plugin.js
...
server: {
   port: 3000,
   host: '0.0.0.0',
   open: false,
   cors: true,
   origin: 'http://localhost:3000'
},
plugin: [
   prebundle()
   ...
]

这样开发环境就可以了

注意

这个有没有问题，好像有问题，太花时间了哈，留给你们去排除了，我目前发现的是进去的时候 mdye 里面导出请求数据的方法报错，但是订阅的方法是可以执行的

吐槽一下

mdye 里面的。d.ts 类型定义太不完善了，我使用的是最新版本的哈

今天就写到这儿了，如果认可这种方式，我可以把构建的哪一步也写出来 😄 这种方式仅仅代表我个人实现方式。