MonacaでVue＋Typescriptのプロジェクトを動かしてみる

8100 ワード
Vue.js vue-cli TypeScript monaca TypeScript テキストリンク

Monacaにはテンプレートが多数用意されているが、Vue.js＋Javascriptしか見当たらなかったので、Typescript化してみた。

Vueプロジェクトの作成

Vue-cliのインストール

npm install -g @vue/cli

Vueプロジェクトの作成

vue create test

  • 手動で機能を選択します。

  • 必要な機能を聞かれるため、「Typescript」にチェック（その他、必要に応じてチェック）

  • その他の項目は、こんな感じで設定してます

Monacaの設定

【前提】
- monaca-cliインストール済み
- 「monaca login」実行済み

Monaca初期設定

作成したVueプロジェクト内で以下のコマンドを実行

monaca init
  • 色々聞かれるが、以下のように設定 ※コマンドプロンプトだとmonacaコマンドが動かないことが多々あるため、GitBashで実行してます。 　（monaca-cliバージョン：3.1.0）

package.jsonを修正

package.json
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build --dest www --no-clean",
        "lint": "vue-cli-service lint",
        "monaca:preview": "npm run build & npm run dev",
        "monaca:transpile": "npm run build",
        "monaca:debug": "npm run watch",
        "dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081"
    },
    "devDependencies": {
        ・・・
        "browser-sync": "^2.24.5",
        ・・・
    }
  • 空のフォルダで「monaca init」した際のpackage.jsonから必要なものをマージ。
    • ポイントはscriptsのbuildで出力先をwwwに変更
      • wwwにある内容をビルドするため、ここに出力する必要がある
      • また、manifestファイルなどを消さないないように「--no-clean」を付与
        　　　
  • browser-syncは「npm install --save-dev browser-sync」でOK

ローカルでプレビューしてみる

npm run monaca:preview

クラウドにアップロード

monaca upload
  • 以下のように設定

  • ダッシュボードにプロジェクトが追加されている

クラウドIDEで開いてみる

  • プレビューされない。。。

※まだビルド中でした

  • ちゃんとクラウドIDE上のプレビューでも確認できました！

実機で動かない．．．

Android版のデバッグビルドして実機にインストールしてみたが、アプリが動かなかった。。。
⇒原因および解決策が分かり次第、追記しようと思います。

(2019/08/19追記)

@v97ug さんから情報提供いただきました！ありがとうございます！！

vue.config.js
module.exports = {
    baseUrl: './'
}

デバッグする際は以下のように設定する

package.json
"scripts": {
    "monaca:preview": "vue-cli-service serve & vue-cli-service build --dest www --no-clean --watch",
    "monaca:transpile": "vue-cli-service build --dest www --no-clean",
    "monaca:debug": "vue-cli-service build --dest www --no-clean --watch"
}

こちらに載っています