【踩坑记录】uni-app工程转vue-cli 工程

接手了一个uniapp项目，旧代码只能hbuilder编辑器打包，无法上公司的流水线，抽空研究了一下怎么转成npm打包。
网上的教程看起来特别简单，无非就是找个壳子把旧代码包起来。但是转换的过程中，踩坑不断。

思路一

按官网上教的用vue-cli 4.x去创建了一个的默认模板，旧代码扔进src文件夹，npm run serve。
报错一堆，连html-webpack-plugin都报错说找不到……检查了node_modules，生成的模板是webpack 5.74。菜鸡懵逼，uniapp官网不是说vue脚手架4创建出来的应该是webpack4吗…
但是不管我怎么尝试uniapp的npm指令，创建出的默认模板都是webpack5……
突然想到github上应该有类似的项目，我可以把人家的壳子扒下来。

思路二

顺利找到一个开源uniapp项目，这个项目是webpack4，地址：
https://github.com/stavyan/TinyShop-UniApp
src替换成我的旧代码，走起~
下面记录一下，遇上的各种报错信息

报错1：node-sass安装不上

TinyShop的sass-loader版本是7.1.0，并且同时装了sass和node-sass。
sass-loader不一定非要装node-sass，sass-loader官网上看，低版本sass-loader一直推荐装node-sass，但是高版本开始就说node-sass和sass可以二选一。
于是我删掉了package.json的node-sass，重新npm i。

报错2：less-loader未安装

迷惑，为啥有了sass，还要装less，全局搜代码，发现其中有两个文件写的是：

<style lang="less" scoped>

干掉，改成

<style lang="scss" scoped>

报错3：/deep/编译没通过

因为这个版本的sass不支持/deep/，全局替换成::v-deep

报错4： end value has mixed support, consider using flex-end instead

flex布局不支持start和end，要改成flex-end和flex-start。开发过pc端的同学应该也遇到过，start和end甚至低版本的谷歌浏览器都不支持。

至此，打包和运行都没啥问题了，如果部署后不是根目录，vue.config.js还需要加上：

publicPath: './'

之前写在manifest里的proxy代理，依旧有效，不用在vue.config.js再写一遍。

--------分割线----------

发生了变态的特殊情况，本地运行和打包都没问题，公司流水线上编译失败……
报错信息：

Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema。- options has an unknown property 'data'. These properties are valid:object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

全网都告诉我，sass-loader版本过高，要降到7.1.0，可我已经是7.1.0了啊啊啊啊啊啊。
难道还要降到6不成？
自暴自弃降到了6，结果报错更多了（跪下
prependData是8的写法，破罐破摔sass-loader改成8，竟然编译通过了……迷惑脸……
我怀疑公司的流水线依赖包源是不是有问题……