使用uniapp框架搭建浙里办微应用

===

一、前期准备

1. 由于浙里办的微应用是必须前后端分离，且前端文件需要部署到浙里办服务器上的，所以需要前端项目支持 rpm run build 命令，所以不能使用Hbuilder X直接构建项目，需要如下命令构建，选择默认模板即可，细节参考uniapp官网；

   // 安装脚手架 npm install -g @vue/cli // 新建项目 vue create -p dcloudio/uni-preset-vue 项目名字

2. 由于浙里办编译默认输出位置是build，但是uniapp的构建命令默认输出位置是dist；所以，第一种方式是修改uniapp的构建命令输出位置，将pakeage.json中的scripts属性进行如下修改：

   "scripts": { "serve": "npm run dev:h5", "build": "npm run build:h5", // 在"build:h5"中添加UNI_OUTPUT_DIR='build'即可 "build:h5": "cross-env UNI_OUTPUT_DIR='build' NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build", "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve" },

或者在根目录下新建gbc.json文件向浙里办指定输出目录

// gbc.json
{
	"type":"build-config",
	"version":"0.0.1",
	"outputPath":"dist"

1. 由于前端项目部署在浙里办服务器上，所以还需要对manifest.json文件进行如下修改

   { "name" : "xxxxxxxx", "appid" : "", "description" : "", "versionName" : "1.0.0", "versionCode" : "100", "transformPx" : false, "h5" : { "publicPath" : "./", // 修改1 不修改此处会出现应用白屏的情况 "router" : { "base" : "./", // 修改2 不修改此处会出现图片拿不到的情况 "mode" : "hash" // 修改3 浙里办只支持hash路由 } } }