如何将 cordova 包裹在现有的 nuxt.js 项目中？答案

【问题标题】：How to wrap cordova around an existing nuxt.js project?如何将 cordova 包裹在现有的 nuxt.js 项目中？
【发布时间】：2019-09-01 09:38:22
【问题描述】：

我有一个现有的 nuxt.js 项目。现在我想为 Android 和 IOS 部署我的代码，因此我想使用 Cordova。

我做了很多研究，但找不到解决方案。我找到了一个插件https://github.com/m0dch3n/vue-cli-plugin-cordova 似乎可以完成工作。我安装了它并运行了“npm run cordova-serve-android”，但它给了我这个错误：

This relative module was not found:

* ./src/main.js in multi (webpack)-dev-server/client?http://192.168.0.28:8080/sockjs-node 
(webpack)/hot/dev-server.js 
./src/main.js, multi (webpack)-dev-server/client?http://localhost (webpack)/hot/dev-server.js 
(webpack)-dev-server/client?http://192.168.0.28:8080/sockjs-node ./src/main.js

不幸的是，在 github 插件页面上没有一个关于 Nuxt 的问题，所以我认为这个插件不适用于 Nuxt。有兼容 Nuxt 的教程或插件吗？

【问题讨论】：

没有运行yarn nuxt generate 并将生成的文件移动到您的cordova www dir enoguh？我认为使用 nuxtJs 或（在我的情况下）jquery.mobile 并不重要，因为它们是静态文件

标签： cordova vue.js nuxt.js

【解决方案1】：

我为此做了一个示例 repo，试图找到一个错误，您可以将其用作示例。基本上你把这些东西添加到你的 nuxt 配置中

mode: 'spa',
generate: {
    dir: 'www',
},
build: {
   publicPath: '/android_asset/www/front-end',
},
scripts: [
  {
    src: '/cordova.js',
    type: 'text/javascript',
  },
],

这当然是针对android的，可以为ios调整公共路径。那么你需要做的就是

nuxt generate

设置一个脚本将文件夹从www/android_asset/www/front-end移动到www/front-end

cordova add platform android@latest --save
cordova run android

这没有使用任何额外的插件，只是将 cordova 添加到现有的 nuxt 存储库中。然而它并不完整，只是一个例子，仍然需要 index.js，并等待cordova 文档中的设备就绪等内容。

https://github.com/amritk/min-repro-nuxt-cordova

【讨论】：