Vue项目打包流程优化与注意事项
项目打包的流程，真的不复杂，但细节挺多，尤其是 Vue 项目和移动端 App 打包这块。你要是平时用 VS Code 和 HBuilderX 比较多，这套流程还蛮顺手的。像修改代理路径、配置 vue.config.js 的 publicPath，这些都属于上线前的常规操作，别忘了替换成真实地址哦，不然打包后的页面啥都求不到。
路由模式也记得看一眼，改成 hash 模式更保险，是你没配后端重定向时，避免上线直接 404。打包命令用 npm run build，执行完后会生成一个 dist 文件夹，这就是你准备发给运维的‘成品’了。
本地预览可以用 live-server 打开 index.html，模拟上线效果。如果有跨域问题，装个浏览器插件就行，挺方便的。
要是你还用了 Express 做后端，就直接把 dist 内容复制到 06express/public 目录里。拉到桌面更好找，打开终端装依赖、启动服务，端口比如 5000，打开看看能不能正常跑。
至于 HBuilderX，打包移动端也挺顺。建个 5+App 项目，把 dist 里的内容搬进去。manifest.json 配置下 AppID、名称、图标啥的，记得取消 Contact 模块，避免不必要的权限弹窗。勾选 x86 架构，走云打包流程就行。
打包按钮点之前，账号要登录哈，不然会卡在验证那一步。如果不小心碰到啥问题，可以去 HBuilderX 个人中心 瞅一眼，手机号验证也挺快。
打包前准备工作多一些，但只要流程走顺，部署基本不会出大错。如果你经常做 Vue 项目或者混合 App，这套流程可以收藏一下，后面肯定用得上。
文件大小：2.73MB
评论区