在vue項目中,如果需要使用cordova插件,我們需要先在package.json中添加cordova依賴,并在入口文件main.js中引入cordova.js文件,然后通過window對象來使用cordova插件。如下所示:
npm install cordova --save
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 引入cordova.js
if (process.env.VUE_APP_MODE === 'cordova') {
const cordovaScript = document.createElement('script')
cordovaScript.setAttribute('type', 'text/javascript')
cordovaScript.setAttribute('src', 'cordova.js')
document.body.appendChild(cordovaScript)
}
new Vue({
router,
store,
render: h =>h(App)
}).$mount('#app')
使用cordova插件需要注意以下幾點:
- 只有在真實設備上才能使用cordova插件,無法在開發環境中使用;
- 插件的使用需要在deviceready事件之后才能執行,否則會報錯。
為了確保在deviceready事件之后再使用cordova插件,可以在main.js中添加如下代碼:
document.addEventListener('deviceready', function() {
new Vue({
router,
store,
render: h =>h(App)
}).$mount('#app')
}, false);
這樣就可以確保在deviceready事件之后再創建vue實例并使用cordova插件了。