#nuxt cordova web ハイブリッドアプリ作成した時のメモ

#config file

nuxt.config.js

const pkg = require("./package");

module.exports = {
  mode: "spa",

  /*
   ** Headers of the page
   */
  head: {
    title: pkg.name,
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: pkg.description }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    script: [{ src: "cordova.js" }]
  },

  /*
   ** Customize the progress-bar color
   */
  loading: { color: "#fff" },

  /*
   ** Global CSS
   */
  css: [],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],

  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    "@nuxtjs/axios",
    // Doc: https://bootstrap-vue.js.org/docs/
    "bootstrap-vue/nuxt"
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
    publicPath: "/nuxt/"
  },
  router: {
    mode: "hash"
  }
};
  • script: [{ src: "cordova.js" }]
    cordova 依存 js: cordova ライブラリ使うために
  • publicPath: "/nuxt/"
    publicPath デフォルト_nuxt から変更、_は認識されないため
  • router: { mode: "hash" }
    route いじらないと cordova でうまく起動しない、/index.html 開くため
  • mode を spa にする
      ssr 対応できないため

#npm run generate

nuxt ファイルを generate する

npm run generate

デフォルト dist ディレクトリに generate される
中身をコピーして cordova ディレクトリの www にコピー

#ファイル内容に/nuxt/から nuxt/に一括置き換え

/nuxt/ではうまく表示されない、ルートが違うため

#create project

cordova create cordova
cd cordova

#add platform

cordova platform add ios browser android
cordova run android

完了!

#java JDK インストール

Java SE Development Kit 8u211(opens new window)

  • linux
  • macos
  • windows
    ダウンロードしてインストール

#android SDK インストール

Android Studio(opens new window)
ダウンロードしてインストール

#path 通す

ANDROID_HOME=C:\Users\xxxxx\AppData\Local\Android\Sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_211
PATH 追加
C:\Program Files\Java\jdk1.8.0_211\bin
C:\Users\xxxxx\AppData\Local\Android\Sdk\platform-tools
C:\Users\xxxxx\AppData\Local\Android\Sdk\tools

2019-06-01
  • vuejs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定