当前位置: 首页 > Web前端 > vue.js

如何通过docker编译vue项目

时间:2023-03-31 21:27:25 vue.js

介绍nodejs官方提供docker镜像,镜像自带npm工具,也就是说可以使用docker镜像编译本地前端项目,那么docker有什么优势编译对比本地安装的nodejs编译可以安装多个版本的nodejs,可以选择指定版本的nodejs进行编译。如果你想搭建一个构建平台,这是一个非常好的无需安装的解决方案。如果需要安装多个版本的nodejs,这个优势很明显,不会造成污染如果是在本地环境做个人开发,使用docker编译项目是有点geek的行为,个人优势不大开发,但是如果你想搭建一个构建系统,那么docker镜像方案是你最好的选择。实现虽然nodejs官方提供了镜像,但是在实践中,如果直接使用官方的镜像是达不到预期效果的。原因如下。虽然自带了npm工具,但是由于WORKDIR的关系,无法正常编译。尝试了各种方法,还是不能顺利编译。基于官方镜像二次构建成本很低,建议根据自己的需求进行二次构建。我们首先实施它。node:16.3.0WORKDIR/user/appENTRYPOINT["npm","install"]的一个npminstall函数镜像准备Dockerfile文件必须指定WORKDIR,使用dockerbuild时将项目挂载到WORKDIR即可构建镜像-t节点安装:16.3.0。我们以编译这个项目为例?dockerrun-v/u01/workspace/vue-2.0-simple-routing-example:/user/app-it--rmnode-install:16.3.0最新,审计了615个包在12s1软件包正在寻找资金运行`npmfund`以获取详细信息63个漏洞(17个低,17个中等,27个高,2个严重)要解决不需要注意的问题,请运行:npmauditfix解决所有问题(包括重大更改),运行:npmauditfix--forceRun`npmaudit`了解详情。成功完成npminstall后,我们可以制作另一个构建镜像userbuild,但我们可以将install和build放入一个镜像中。准备脚本entrypoint.sh#!/bin/bashnpminstallnpmrunbuildDockerfilefromnodeWORKDIR/user/appCOPYentrypoint.sh/RUNchmod+x/entrypoint.shENTRYPOINT["/entrypoint.sh"]buildimagedockerbuild-tnode-build:16.3.0.test?dockerrun-v/u01/workspace/vue-2.0-simple-routing-example:/user/app-it--rmnode-build:16.3.0......>build>cross-envNODE_ENV=productionwebpack--progress--hide-modulesHash:a6a2352d086bcda1ccb9Version:webpack2.5.1Time:2581msAssetSizeChunksChunkNamesbuild.js87.9kB0[emitted]main这样我们就做了一个很方便的前端搭建图片补充前面说到,因为WORKDIR的关系,不能使用官方镜像来编译项目。后来了解到docker在启动时可以指定WORKDIR,所以也可以通过指定WORKDIR来编译。dockerrun-v/u01/workspace/vue-2.0-simple-routing-example:/user/app-w/user/app-it--rmnode:16.3.0npminstalldockerrun-v/u01/workspace/vue-2.0-simple-routing-example:/user/app-w/user/app-it--rmnode:16.3.0npmrunbuild参考如何用docker编译java项目