# 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
ダウンロードしてインストール

# 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

関連記事

Nuxtjs 3 に Ant design Vue を使う
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
vuejs v-if と v-show の違い
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
javascript password generator ランダム文字列パスワード作成
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ