Uni-app工程转vue-cli工程步骤

一碗芝麻糊糊
1,135 阅读3分钟

一、全局安装vue-cli

// 安装之前需要安装node,npm,安装方法自行百度
npm install -g @vue/cli

二、创建一个空的uni-app工程

// 使用正式版（对应HBuilderX最新正式版),my-project项目名称不支持驼峰式命名
vue create -p dcloudio/uni-preset-vue my-project

// 使用alpha版（对应HBuilderX最新alpha版**
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

// 使用Vue3/Vite版
1.创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

2.创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板） 
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

// 此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板）

安装完成后的目录结构：

三、安装sass

npm install node-sass@4.14.1 --save
npm install sass-loader@8.0.0 --save

// 注：node-sass和sass-loader安装需要制定版本，版本太高会不兼容，指定版本如安装不成功自行百度解决办法

安装成功后在package.json文件中查看

四、替换src目录文件

  1. 将新建的项目中的src文件里边的内容全部删掉；
  2. 将之前hbuilder创建的项目中的文件拷贝到新建项目的src目录, 除unpackage、nativeplugins和工程化的文件eslint、pretty、node_modules等
  3. 将项目中的依赖的包汇总到cli项目的package.json中，重新安装包依赖
  4. cli项目支持env，同vue项目一致Vue2，Vue3，可按需求添加
注意事项

如果项目之前在hx中打开过，转换成cli项目后需要重新导入，或者重启hx，好让hx正确识别manifest.json，否则无法使用hx运行。

五、修改部分文件

由于之前在项目中引用了sacc和less两种css预处理器，在vue-cli中两种会冲突，所以需要把之前用到的less处理器的文件给修改为sass处理器。(以后开发uni-app项目只用sass即可，uni-app的插件市场的插件基本也都是使用的sass)

  1. 将common目录下的page.less文件修改为page.scss
  2. 将app.vue文件引用的page.less改为page.scss
  3. 检查其他vue文件的样式声明（主要是pages目录下的页面）

如lang="less"都需要改为lang="sass"

六、运行项目

npm run serve

七、项目打包

npm run build

八、总结

​ 由于安全管控app的子app较多，不需要一个一个创建，可创建一个标准的空项目，以该项目的package.json文件的依赖包为准，其他项目直接拷贝安装就行（保证各app的依赖包版本统一）。

  1. 创建项目文件夹，拷贝标准项目模版，只拷贝红框内的文件。
  2. 替换src文件内容。
  3. 执行npm install安装依赖包。
  4. 执行npm run serve运行项目。
  5. 执行npm run build打包项目。

九、踩坑记录

Syntax Error: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

node-sass的版本要与node版本对应起来，见node-sass - npm 本地node是v14，改为node-sass@~4.14.0

Node Sass could not find a binding for your current enviroment

该问题出现在hx中运行h5，hx是自带了node的环境的，mac系统上路径为/Applications/HBuilderX.app/Contents/HBuilderX/plugins/node，而且这个是v12版本(查看自己hx对应的node版本，到这个目录下执行./node -v)，再降低node-sass版本到~4.12.0

Internal Babel error: path is not in loop. Please report this as a bug

汇总依赖包时候babel的问题，有些已经集成到cli的项目中，建议以cli项目的为准，如果有缺少的再做补充

ios真机运行问题

转为cli项目后debug包的路径发生变化，虽然选了自定义基座，实际并读取不到，重新生成自定义基座或是复制unpackage/debug到dist/debug

avatar
文章
阅读
粉丝