cordova vue cli構建跨平台應用

2021-09-11 14:23:36 字數 3070 閱讀 9796

npm i cordova -g

複製**

cordova create 專案名稱

複製**

可新增的平台:android、ios、blackberry 10、os x、ubuntu、windows、wp8 執行前需要配置平台的sdk,配置方法就不詳細描述了,官網都有詳細的說明。 cordova platform add 平台名

cordova platform add android

複製**

外掛程式搜尋頁 cordova plugin add 外掛程式名

示例:新增熱更新外掛程式

cordova plugin add cordova-hot-code-push-plugin

複製**

執行前需要配置平台的sdk,配置方法就不詳細描述了。android配置

cordova run 平台名

複製**

示例:cordova run android 執行安卓

該操作會將cordova專案下的www目錄打包成網頁;

cordova build 平台名

複製**

官網
npm install --global vue-cli

複製**

注意:在cordova專案下新建專案

vue init webpack 專案名

複製**

在vue專案下執行

npm i

複製**

在vue專案下執行

npm run build

複製**

在vue專案下執行

npm run dev

複製**

開啟vue專案下的config/index.js檔案按圖指示修改檔案

更改vue下的index.html檔案,在新增以下內容。

複製**
在vue目錄下執行vue的打包命令,然後回到cord***目錄下執行打cordova的打包命令。

每次測試的時候先要,在vue下輸入npm run build,然後在輸入cordova run build,這裡我們通過自定義指令碼整合這兩個命令。

1. 更改vue下的package.json如下面的**所示:在最後加入一條("android": "npm run build && cordova run android"),這句話等同於在命令列中輸入npm run build && cordova run android

...

"scripts":

...複製**

2. 執行命令列輸入npm run 自定義的指令碼名,示例:npm run android

1. 新增自動更新外掛程式

cordova plugin add cordova-hot-code-push-plugin

複製**

2. 開發環境依賴不安裝該外掛程式會導致,本地執行後網頁得不到更新。

cordova plugin add cordova-hot-code-push-local-dev-addon

複製**

3. 安裝自動更新客戶端,一台電腦只需要安裝一次。

npm install -g cordova-hot-code-push-cli(使用見發布更新)

複製**

在cordova專案跟目錄下新建該檔案。

key含義

說明content_url

專案位址

放在伺服器上的專案位址

update

更新方式

update的可選值

含義start

resume

now示例

複製**

在cordova專案根目錄下為該檔案新增新的配置,在config-file中填寫chcp.json的位址,預設位置為www/chcp.json。

...

"true" />

"true" />

"" />

...複製**

在cordova專案下執行cordova-hcp build.此時會在www目錄下生成chcp.json,chcp.manifest兩個檔案,chcp.json中有部分內容與之前配置的cordova-hcp.json檔案相同。

將根cordova目錄下的www目錄替換伺服器上的www目錄

兩個方法配合使用,先獲取更新資訊,然後在安裝更新。

方法名作用

fetchupdate

獲取更新資訊

installupdate

開發過程中會遇到一些錯誤,見error 詳情

document.addeventlistener('deviceready', () => 

window.alert(msg)

})} else else ;data:$`)}}

})}, false)

複製**

vue獨立構建和執行構建

概念 有兩種構建方式,獨立構建和執行構建。它們的區別在於前者包含模板編譯器而後者不包含。模板編譯器 模板編譯器的職責是將模板字串編譯為純 j ascript 的渲染函式。如果你想要在元件中使用template選項,你就需要編譯器。模板字串 template el 提供乙個在頁面上已存在的 dom 元...

Jekkins構建觸發器(定時構建專案)

在前端用jekkins自動構建的時候發現了在構建觸發器的時候有不明白的數字。就上網查了查,很多這種的部落格,我就想記錄一下讓自己有點印象。選擇poll scm 定時檢查原始碼變更。就以上的為例子來說一下吧!第乙個引數代表的是分鐘 minute,取值 0 59 第二個引數代表的是小時 hour,取值 ...

利用構建快取機制縮短Docker映象構建時間

在使用docker部署php或者node.js應用時,常用的方法是將 和環境映象打包成乙個映象然後執行,一些雲廠商提供了非常便捷的操作,只需要把我們的 提交到vcs上,然後它們就會幫我們拉取 並根據 包內的dockerfile構建我們的映象然後部署到集群裡。php和node.js都有非常不錯的生態,...