如何把现有的Vue3项目以*低的成本迁移到微信小程序插件内

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

如何把现有的Vue3项目以*低的成本迁移到微信小程序插件内

注：是微信小程序插件，不是微信小程序。 如果还有不太理解的同学可以阅读官方对该插件的介绍。

非正式。 介绍

我们先来说说为什么要趟这趟浑水~（以下是与产品经理的友好会面）

我公司目前有一个智能在线客服客户端项目，基于Vue3+Vuex++开发了8个多月，迭代到V3.3版本。 客户只需将我们的SDK代码嵌入到自己网站的标签中，即可为其网站提供我公司的智能在线客服，并且已经支持PC端和H5端。 由于上层需求，某大客户想在自己的小程序中使用，明确拒绝使用嵌入方式（在后来的尝试中，发现小程序插件不支持使用标签）全部）。

于是，我被迫走上了这条不归路……

一、各种尝试

因为我们已经有一个现有的Vue3项目，而且市面上已经有非常多的编译框架可以将Vue项目转换为小程序，所以我们*初的探索思路很明确：利用市场上现有的小程序编译框架来转换现有的Vue3以*小的修改成本将项目转换为微信小程序代码。 于是就开始了我们的探索之旅。

每节末尾用×和√表示哪种方法可以正常初始化项目。 不想看中间陷阱的朋友可以直接看本章1.1节。

1.1 官方提供原生小程序插件Demo（√）

在深入研究每个框架之前，我们首先要确保小程序插件确实存在并且仍然可用。 于是我们去微信公众平台官网找到了开发插件的章节，下载了一个所谓的完整的插件示例，可以直接在微信开发工具中查看。 在微信开发工具中打开，如下图：

可以发现目录结构与普通小程序有些不同。

经过一番尝试，插件的目录结构和各自的功能已经基本确定。 只要你把你的普通小程序代码放在一个文件夹中，正常运行，并导出你对应的事件、页面、组件，小程序插件的开发就完成了。

因此如何把现有的Vue3项目以*低的成本迁移到微信小程序插件内，我们接下来的任务就是：如何将现有的Vue3项目转换成普通小程序的语法，并放到一个文件夹中，使其能够正常运行。

1.2 Uni-App框架(×)

目标明确，经过初步考虑，我们决定使用提供的Uni-App框架进行转换。 即可以使用Vue.js的语法，同时编译成H5、App、小程序等多终端平台。 而且，还有一个（不算）巨大的插件市场，应该也会为后期的开发提供一些帮助。 （简直太满足不了需求了）于是，就开始了……

按照文档中的步骤初始化创建uni-app项目，并启动项目，在微信开发工具中完美运行。

于是我把这个项目发布为微信小程序，将打包的代码全部复制到目录下，完美报错！

(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["pages/index/index"]{......},[["df45","common/runtime","common/vendor"]]]);

嗯……

创建的项目可能有问题，那么我们通过命令行创建Uni-App项目：

vue create -p dcloudio/uni-preset-vue#vue3 vue3_uni_app

同样，在微信开发工具中运行完美，但是当我将代码复制到文件夹中时，却完美报错！

放弃它吧。

1.3 Taro框架(×)

后来了解到/cli脚手架可以初始化一个微信小程序插件模板，于是按照官网给出的安装和使用说明安装了脚手架，并根据小程序初始化了vue3++插件项目官方网站给出的插件开发指南。 （简直太不完美了~）

我发现项目的目录结构和1.1中从官网下载的目录结构很相似，也有文件夹。

├── config 配置目录
├── src 源码目录
| ├── pages 调试页面目录，用于调试插件
| | └── index
| ├── plugin 插件目录
| | ├── doc 插件文档目录
| | ├── components 组件插件目录
| | ├── pages 页面插件目录
| | ├── index.js 接口插件文件
| | └── plugin.json 插件配置文件
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
└── package.json
└── package.config.json

根据明确的指令完美编译项目。

taro build --plugin weapp --watch

使用微信开发工具打开编译好的../root/dist/目录，完美报错！

(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[7]{......}Page(Object(o["createPageConfig"])(w,"pages/index/index",{root:{cn:[]}},j||{}))}},[[40,0,1,2]]]);

并且尝试只将taro项目打包文件夹中的内容复制到从官网下载的插件项目的文件夹中。 再次，错误报告完美！

放弃它吧。

注意：使用/cli创建的react模板的插件项目可以运行，但是后期开发有很多坑，比如找不到各种taro和微信原生APIvue微信小程序开发，修改时会报错，插件安装或者使用错误等等等等，有兴趣的话可以尝试一下。 由于与我的技术栈不符，这里不再赘述。

1.4 mp-vue框架(×)

我按照mpvue官网给出的用户手册安装了脚手架并初始化了项目。 编译后没有报错。 我将编译后的代码复制到该文件夹​​中。 再次，错误被完美报告！

放弃它吧。

1.5 WePY (×)

同样，我按照官网给出的说明安装了脚手架并初始化了项目。 编译后没有报错。 我将编译后的代码复制到该文件夹​​中。 再次报告完美错误！

放弃它吧。

总结

*终我们无奈选择了微信公众平台官网提供的插件demo，使用微信原生语法进行开发。

陷阱教程到此结束~

谢谢大家~

再见~

系列文章

除了**篇之外，其他的题目可能还没有想到，以后会继续完善。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等