公司项目一直使用vue开发，最近公司项目需要改用uniapp就行开发，而uni-app使用的是vue的语法，不是小程序自定义的语法。并且uni-app能实现了一套代码，同时运行到多个平台，通过vue-cli命令行方式快速创建结构如下：
dist=======打包后的文件存放（如小程序分包）
mainWeixinMp====可存放原生小程序或者使用uniapp打包之后的小程序
public=====入口文件
projectToSubPackageConfig.js=====使用第3方打包配置
vue.config.js=======vue配置
打包h5代码的过程中，为了在切换环境的时候不用手动改变配置文件 因此使用node相关api对配置文件进行修改 vue.config.js配置：
const path = require('path');
const fs=require('fs')
const { execSync } = require('child_process');
const {NODE_ENV,UNI_PLATFORM}=process.env;
const branch = execSync('git rev-parse --abbrev-ref HEAD', { encoding: 'utf-8' }).trim();//获取当前分支环境
// const branch = 'develop';
const staticDomain = { 不同环境域名配置 };
const domain = staticDomain[branch] || ''; // 把当前分支注入到环境变量中
process.env.VUE_APP_BRANCH = branch; // 把当前静态资源域名注入到环境变量中
process.env.VUE_APP_DOMAIN = domain; // console.log('当前所在分支: ', branch);
// console.log('静态资源路径: ', domain); // 替换配置中的部署路径
function editH5Config() {
const src = path.join(__dirname, './src/manifest.json');
const json = fs.readFileSync(src, { encoding: 'utf-8' });
const [$0, $1] = /"publicPath":.+(".*")/.exec(json);
const data = json.replace($0, $0.replace($1, `"${domain}"`));
fs.writeFileSync(src, data);
}
if(NODE_ENV=== 'production'&&UNI_PLATFORM==='h5'){
const outputDir='';//打包目录存放配置
process.env.UNI_OUTPUT_DIR=outputDir; editH5Config();//更改h5配置文件
}
module.exports = { productionSourceMap: false, }
在package.json中加入：
"prd": "cross-env UNI_OUTPUT_DIR=dist NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
运行 npm run prd 就直接打包成h5 文件
完成了h5打包后，接着就是考虑整个项目打包成小程序分包给其它项目使用 或者作为主包加入其它分包生成小程序，首先需要引入了uniapp2wxpack插件
uinapp整个项目最为分包 （发现打包后组件与组件之间的引用为绝对路径会导致找不到引用的组件，因此需要更改引用地址）需要在projectToSubPackageConfig.js中配置 分包名称a
const packName = 'a'分包名字
const modulesName = "a-modules"//打包后重写组件目录名字
module.exports = {
// 微信原生小程序目录
mainWeixinMpPath: 'mainWeixinMp',
/** *********主包************ */
// uni项目输出的分包在微信原生小程序中的路径
subPackagePath: packName,
// uni项目的App.vue中初始设置的处理方式，默认是relegation(降级模式)，[top(顶级模式) / none(丢弃)]
appMode: 'relegation',
// 如果微信原生小程序目录中的目录名称合uni项目输出的目录名相同，是否融合处理，默认不融合处理，直接忽略原生小程序里的目录，merge以uni项目优先
mergePack: false,
plugins: [
(content, {
relative
}) => {
//组件内组件与组件之间的引用改为相对路径
if (relative.match(/\/node-modules\/(\S*)uview-ui\/components\/[\S]+\.json$/g)) {
const json = JSON.parse(content);
// console.log('relative===============',relative)
if (json.usingComponents) {
// eslint-disable-next-line no-restricted-syntax
for (const i in json.usingComponents) {
// 替换url
// if(relative=='/a/node-modules/uview-ui/components/u-parse/libs/trees.json'){
if(relative.match(/\/node-modules\/(\S*)uview-ui\/components\/[\S]+\/libs\/[\S]+\.json$/g)){
// json.usingComponents[i] = './trees'
json.usingComponents[i] = json.usingComponents[i].replace(/\/node-modules\/(\S*)uview-ui\/components\/[\S]+\/libs/,
'.');
}else{
json.usingComponents[i] = json.usingComponents[i].replace(/\/node-modules\/(\S*)uview-ui\/components/,
'..');
}
// if (json.usingComponents[i] == '../u-parse/libs/trees') {
// json.usingComponents[i] = './trees'
// }
}
return JSON.stringify(json, null, 2);
}
} else if (relative) {
// 替换所有的url
// eslint-disable-next-line no-param-reassign
content = content.replace(/node-modules/g, modulesName);
}
return content;
},
],
};
组件内组件与组件之间的引用改为相对路径
如果多个项目需要打成小程序分包未了区分小程序分包中包含组件目录名字不同，需要在打包的时候给组件目录重新命名，因此加了一个custom.script.js
// 打包后 分包依赖 node-modules 文件夹名
// 每个分包的 依赖 需要 唯一的一个名字
const path = require('path');
const fs = require('fs');
// 分包名
const subPackageName = 'a'
// 旧包
const oldDirName = 'node-modules';
// 新包
const newDirName = 'a-modules';
// 需要修改名称的路径，(注意：路径后要加/)
const dirs = [
`./dist/build/mp-weixin-pack/${subPackageName}/`
];
dirs.forEach((dir) => {
const oldPath = path.join(__dirname, `${dir}${oldDirName}`);
const newPath = path.join(__dirname, `${dir}${newDirName}`);
const stat = fs.statSync(oldPath);
if (stat.isDirectory) {
fs.renameSync(oldPath, newPath);
}
});
console.log('名称修改成功...');
package.json文件scripts中增加"build:mp-weixin-path": "npm run build:mp-weixin-pack && node custom.script.js"
运行 npm run build:mp-weixin-path,打包后小程序分包与重写组件目录如下：
之间将打好的文件给与其它项目当做小程序分包使用
因此在其它项目中作为主包加入分包作为小程序项目的时候，出现了分包分包跳转出现报错，结果发现是在作为主包打包的时候 分包里面的文件跟主包里面的文件出现同名的，因此导致报错，所以需要对projectToSubPackageConfig.js中配置进行更改,配置如下：
module.exports = {
// 微信原生小程序目录
mainWeixinMpPath: 'mainWeixinMp',
/** *********主包************ */
// uni项目输出的分包在微信原生小程序中的路径
subPackagePath: '',
// uni项目的App.vue中初始设置的处理方式，默认是relegation(降级模式)，[top(顶级模式) / none(丢弃)]
appMode: 'top',
// 如果微信原生小程序目录中的目录名称合uni项目输出的目录名相同，是否融合处理，默认不融合处理，直接忽略原生小程序里的目录，merge以uni项目优先
mergePack: true,
plugins: [
(content, {
relative
}) => {
const packList = ['a'];//加入的分包名称
try {
packList.forEach((packPath) => {
const jsRegExp = new RegExp(`^\\/${packPath.replace(/\//g, '\\/')}\\/[\\S]+\\.js`)
// 匹配到uni目录的js
if (relative.match(jsRegExp)) {
// 替换webpackJsonp（不是最好的方案，但是只能这么处理）
throw Error(content.replace(/global\["webpackJsonp"]/g, `global["webpackJsonp_${packPath}"]`))
}
})
} catch (e) {
// 替换
return e.message
}
return content
},
],
};
使用npm run dev:mp-weixin-pack打包成功 使用小程序开发工具打开mp-weixin-pack
进行调试是否成功,整个开发到此结束
uinapp查看文档：https://uniapp.dcloud.io/quickstart
