app前端代码打包步骤
app前端代码打包步骤
⼀、搭建项⽬环境
1、安装node.js
在⽹上到nodejs压缩包，下载解压后安装node-v8.9.3-x64.msi⽂件。
安装完毕后，在windows的cmd控制台输⼊node -v或node --version命令，测试是否安装成功，如图1.1，出现版本号就是成功了。
或
图1.1 测试nodejs图
兴的组词2、安装npm
化妆品牌子
npm（Node Package Manager）的安装，其实新版本的node已经集成了npm，所以安装成功node，就不⽤管这步了，为了保险，我们也测试下是否安装成功，如图1.2。
图1.2 测试npm图
3、安装需要的包
我们做项⽬肯定要⼀些基础的包，就如java中引⽤jdk或者别⼈开发好的jar包，⽽现在我们绝不会浪费时间去搜索，下载。就如同maven⼀样，vue.js只要从⽹站下载就可以了，由于默认的npm链接的是国外的⽹站，速度慢，有的根本下载不成功，我们执⾏这条命令就可以直接执⾏ ”cnpm 包名称”，从国内淘宝镜像下载，速度快，当然您也可以npm 包名称，直接从国外的地址下载。
执⾏ npm install -g cnpm --registry=registry.命令，若安装失败时执⾏npm --registry registry. info underscore命令。
4、安装脚⼿架vue-cli
执⾏npm install -g vue-cli命令，输⼊vue -V命令查看是否安装成功，如图1.3。
图1.3 测试vue图
5、创建vue测试项⽬（可选）
利⽤vue-cli创建vue项⽬，输⼊vue init webpack demo (demo 是⾃定义的名称)命令。按提⽰输⼊信息，然后⼀路回车，最终项⽬就会在当
螃蟹怎么洗前⽬录下创建了（我的当前⽬录是c盘），见图1.5。
生当作人杰死亦为鬼雄的意思
图1.5 建⽴测试案例
创建完成后，打开c盘，查看当前的demo⽂件夹，这就是vue-cli 帮我们⽣成项⽬结构。
6、运⾏vue测试项⽬（可选）
进⼊第5步创建的demo项⽬的根⽬录，执⾏npm run dev命令，然后在浏览器上访问loclahost:8080，查看是否启动成功，如图1.6。
毛委员和我们在一起
图1.6 运⾏demo项⽬
⼆、获取前端代码
获取前端项⽬原⽣代码，为⼀个vue（⼀套构建⽤户界⾯的渐进式框架）项⽬，代码原⽣结构见图2.1
图2.1 代码原⽣结构图
获取对应的后台代码，为⼀个spring boot项⽬，修改对应的数据库配置，部署到tomcat服务器上。
三、项⽬打包
1、修改服务器请求地址
在项⽬⽂件中按src>api>api.js路径到api.js⽂件，打开编辑，将setHTTP的值修改为服务器地址，见图3.1。
图3.1 修改服务器地址
2、项⽬打包
在dos窗⼝进⼊到项⽬的根⽬录，执⾏npm run build命令进⾏打包，打包成功后，原项⽬⽂件中会⽣产⼀个dist⽂件夹，如图3.2。若打包失败，则先执⾏安装依赖命令npm install，再执⾏打包命令。
图3.2 项⽬打包
打包⽣成的index.html⽂件，就是该项⽬的访问⾸页，将整个dist⽂件（该⽂件为静态⽂件，可不⽤重启服务器）直接放到tomcat服务器上，就可以通过域名加⽂件路径访问该项⽬了。
如：
3、打apk包（可选）
到上⼀步，该项⽬已经可以通过⽹址访问了，如需要打包成app，则需要⼀个打包模板，结构如图3.3。
图3.3  apk打包模板结构图
Android打apk包，先将android⽂件夹中的local.properties⽂件中sdk.dir路径改成本机的sdk路径。如果不清楚路径，可以使
⽤AndroidStudio软件新建⼀个Android项⽬，该项⽬中的配置⽂件的sdk.dir路径就是本机路径，也可使⽤WebStorm软件。
然后在控制台进⼊到打包模板的android根⽬录下执⾏gradlew.bat assembleRelease命令，成功后即可在如图3.4所⽰的⽬录下，到所需要的apk⽂件，传到⼿机即可安装使⽤。如果打包失败，则在打包前先执⾏npm install命令再执⾏打包命令。
图3.4 Android打apk包
苹果打包等具体参见以下⽹址：
附：使⽤HBuild软件进⾏打apk包
参考链接如下：
其他参考链接：
Android Studio开发环境的搭建与Android Studio模拟器的创建：
在命令⾏中⽣成Android的数字证书keystore⽂件：
特殊的反义词是什么说明：本⽂参考了⽹上相关的技术⽂档并结合实际项⽬打包经验写成。不正确的地⽅有请各位指正！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。