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

插件  收藏
0 / 336

使用 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 类型定义太不完善了,我使用的是最新版本的哈

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