用hbuilderx图形化界面创建uniapp项目爆改支持cli指令发行
1.需求
原有项目只做小程序发布则使用了hbuilderx图形化创建，现在需要用该项目的h5版本，希望能通过jenkins统一打包发行，所以需要命令行发布
2.过程
1.package.json文件中的scripts中注册命令行
"h5-dev": "cd %HBUILDERX_PATH%/plugins/uniapp-cli/ && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/dev/h5 UNI_PLATFORM=h5 NODE_ENV=development node bin/uniapp-cli.js",
"h5-test": "cd %HBUILDERX_PATH%/plugins/uniapp-cli/ && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=test node bin/uniapp-cli.js",
"h5-prod": "cd %HBUILDERX_PATH%/plugins/uniapp-cli/ && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=production node bin/uniapp-cli.js",
注释：
%HBUILDERX_PATH% ： 需要在环境变量中注册HBUILDERX_PATH，指向HbuilderX中的绝对地址，例如我现在电脑的D:/xxx/xxx/HBuilderX.3.99.2023122611/HBuilderX
cross-env：通过npm i cross-env来区分环境
NODE_ENV=development：当前指令对应环境
UNI_INPUT_DIR=$INIT_CWD/ ：uni的输入地址
UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/dev/h5：uni的输出地址
其中dist/dev/h5，dist/build/h5是区分是项目是否为发行项目（build）,如果是dev中未对代码进行压缩
UNI_PLATFORM=h5：编译出来的项目为h5项目
node bin/uniapp-cli.js：执行uniapp-cli.js文件
2.h5的router中的base地址根据环境动态变化
注意：无法用过直接修改vue.config.js中的publicPath实现，需要通过修改manifest文件的方式实现
//在vue.config.js中
const fs = require("fs");
const path = require("path");
// 获取当前环境
const isProd = process.env.NODE_ENV === "production";
const manifestPath = path.resolve(__dirname, "./manifest.json");
// 读取 manifest.json 文件
fs.readFile(manifestPath, "utf8", (err, data) => {
if (err) {
return console.error("读取 manifest.json 文件失败:", err);
}
// 修改 base 路径
let manifest = JSON.parse(data);
manifest.h5.router.base = isProd
? "/path-prod/"
: "/path-dev/";
// 写回文件
fs.writeFile(
manifestPath,
JSON.stringify(manifest, null, 2),
"utf8",
(err) => {
if (err) {
return console.error("写入 manifest.json 文件失败:", err);
}
console.log("manifest.json 更新成功！");
}
);
});
注意：manifest文件可能parse失败，需要将其中的注释语句删掉
3.结果
运行npm run h5-dev,打开uniapp的h5运行模式
运行npm run h5-test,在dist/build/h5中输出测试/开发状态代码
运行npm run h5-prod,在dist/build/h5中输出生产状态代码
项目转化为cli
1.新建一个cli构建的项目(nvm 切换到原项目的node版本)
vue create -p dcloudio/uni-preset-vue my-project
可以先npm i npm run serve npm run build看项目有无问题 如果跑不起来npm install postcss@8 postcss-loader@5 autoprefixer@10
2.迁移
将旧项目中的所有文件复制，粘贴到新项目中的src里，有冲突的直接替换
3.npm install
在package.json中，将原项目所有用到的依赖都复制过来，如果用到了sass,less,记得下对应node版本下的node-sass和sass-loader
npm insatll
4.根据环境打包
cross-env
"build:h5-prod": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build",
5.如果删掉node_modules和package-lock.json后npm i报错或运行报错
一般是因为devDependencies,或者dependices依赖有多种版本的话，例如^x.x.x,那么npm可能会下载到两个冲突的版本
所以可以选择yarn来进行依赖包管理（更兼容）
6.对打包好的文件进行操作（少部分会用到）
//vue.config.js
//保留resources在原来的目录结构中，后端不用改构建命令
configureWebpack: {
plugins: [
// H5
!isMpPlatform &&
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "src/resources"),
to: "resources",
},
],
}),
].filter(Boolean),
},
//因为resources文件是静态资源，只有h5打包的时候会布到服务器上，所以当是微信环境打包时不将其打包进小程序的主包中
chainWebpack: (config) => {
if (isMpPlatform) {
config.plugin("ignore-resources").use({
apply: (compiler) => {
compiler.hooks.emit.tap("IgnoreResourcesPlugin", (compilation) => {
for (const filename in compilation.assets) {
if (filename.includes("resources")) {
delete compilation.assets[filename];
}
}
});
},
});
}
},
