app前端代碼打包步驟

1、搭建項目環境

一、安裝node.js

在網上找到nodejs壓縮包，下載解壓後安裝node-v8.9.3-x64.msi文件。

安裝完畢後，在windows的cmd控制檯輸入node -v或node --version命令，測試是否安裝成功，如圖1.1，出現版本號就是成功了。

或

圖1.1 測試nodejs圖

二、安裝npm

npm（Node Package Manager）的安裝，其實新版本的node已經集成了npm，因此安裝成功node，就不用管這步了，爲了保險，咱們也測試下是否安裝成功，如圖1.2。

 

圖1.2 測試npm圖

三、安裝須要的包

咱們作項目確定要一些基礎的包，就如java中引用jdk或者別人開發好的jar包，而如今咱們毫不會浪費時間去搜索，下載。就如同maven同樣，vue.js只要從網站下載就能夠了，因爲默認的npm連接的是國外的網站，速度慢，有的根本下載不成功，咱們執行這條命令就能夠直接執行 」cnpm 包名稱」， 從國內淘寶鏡像下載，速度快，固然您也能夠npm 包名稱，直接從國外的地址下載。

執行 npm install -g cnpm --registry=https://registry.npm.taobao.org命令，若安裝失敗時執行npm --registry https://registry.npm.taobao.org info underscore命令。

四、安裝腳手架vue-cli 

執行npm install -g vue-cli命令，輸入vue -V命令查看是否安裝成功，如圖1.3。

 

圖1.3 測試vue圖

五、建立vue測試項目（可選）

利用vue-cli建立vue項目，輸入vue init webpack demo (demo 是自定義的名稱)命令。按提示輸入信息，而後一路回車，最終項目就會在當前目錄下建立了（個人當前目錄是c盤），見圖1.5。

 

圖1.5 創建測試案例

建立完成後，打開c盤，查看當前的demo文件夾，這就是vue-cli 幫咱們生成項目結構。

六、運行vue測試項目（可選）

進入第5步建立的demo項目的根目錄，執行npm run dev命令，而後在瀏覽器上訪問loclahost:8080，查看是否啓動成功，如圖1.6。

 

圖1.6 運行demo項目

2、獲取前端代碼

獲取前端項目原生代碼，爲一個vue（一套構建用戶界面的漸進式框架）項目，代碼原生結構見圖2.1

 

圖2.1 代碼原生結構圖

獲取對應的後臺代碼，爲一個spring boot項目，修改對應的數據庫配置，部署到tomcat服務器上。

3、項目打包

一、修改服務器請求地址

在項目文件中按src>api>api.js路徑找到api.js文件,打開編輯，將setHTTP的值修改成服務器地址，見圖3.1。

 

圖3.1 修改服務器地址

二、項目打包

在dos窗口進入到項目的根目錄，執行npm run build命令進行打包，打包成功後，原項目文件中會生產一個dist文件夾，如圖3.2。

若打包失敗，則先執行安裝依賴命令npm install，再執行打包命令。

 

圖3.2 項目打包

打包生成的index.html文件，就是該項目的訪問首頁，將整個dist文件（該文件爲靜態文件，可不用重啓服務器）直接放到tomcat服務器上，就能夠經過域名加文件路徑訪問該項目了。

如：http://baidu.com.cn/dist/index.html

三、打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包

蘋果打包等具體參見如下網址：

https://foxsnower.github.io/2018/03/23/Ios%E5%92%8CAndroid%E5%85%B3%E4%BA%8EAPP%E6%89%93%E5%8C%85%E4%B8%8A%E4%BC%A0/

 

附：使用HBuild軟件進行打apk包

參考連接以下：

http://www.javashuo.com/article/p-feptukct-nb.html

 

其餘參考連接：

Android Studio開發環境的搭建與Android Studio模擬器的建立：

https://blog.csdn.net/sherlockholmes_/article/details/57075444

在命令行中生成Android的數字證書keystore文件：

https://jingyan.baidu.com/article/7e4409533cb10e2fc0e2efa3.html

 

說明：本文參考了網上相關的技術文檔並結合實際項目打包經驗寫成。不正確的地方有請各位指正！！