質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

230閲覧

オフィシャルのVue系プロジェクトが実機デバッガーで動かないものが有る。

oikashinoa

総合スコア2826

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2018/06/17 16:14

オフィシャルのVue系プロジェクトが実機デバッガーで動かないものが有る。

Monacaの新クラウドIDEがVueをサポート開始したとの事で、試しに
”Onsen UI V2 Vue Splitter”を”新規プロジェクト”ボタンでインポートしました。
IDE上のプレビューでは問題なく動作していますが、
実機デバッガー上では動きませんでした。

発生している問題・エラーメッセージ

IDE上のプレビューでは問題なく動作していますが、
実機デバッガー上では動かず、Console上で以下のエラーが発生します。
Uncaught SyntaxError: The URL 'bundle.js' is invalid  www/index.html:69

該当のソースコード

インポート後 ソースの変更なし

試したこと

下記Projectも同じく実機デバッガーで動きませんでした。

  • Onsen UI V2 Vue Tabbar

下記Projectは実機デバッガーで動きました。

  • Onsen UI V2 Vue Minimum
  • Onsen UI V2 Vue Navigation

補足情報(FW/ツールのバージョンなど)

  • 環境
  • Monaca Debugger/Ver7.0.3(2018/6/18時点で最新版)
  • 実機:Honor9/Andorid7
  • WebView/Chrome Stable/Chrome 67

Webpack,Vueについての知識不足だと思いますが、以下が理解できてません。

16行目に下記の記載が有ります。…上記Consoleのエラーで”www/index.html:69 ”と69行目でエラーになっている原因も良く分かりませんし(コンパイルされていると考えますが、コンパイル後のソースを見る手段が?)
、bundle.jsはあるのに何故”URL 'bundle.js' is invalid”?

<script type="text/javascript" src="bundle.js"></script></body>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

2018/6/18 20:38時点でindex.htmlが差し替わっているようで<script>内が変更されていました。差し替え後のProjectなら実機デバッガーでも動きます。
…Monacaさんで対処したなら以下を願いしたいです。(反応無いなら”障害・不具合報告”ページに記載します)

  1. 以下でアナウンスして頂けると嬉しいです。もしかして6/2の対応の影響?

https://ja.monaca.io/headline/fault.html
2. index.htmlの改行を見なおして欲しいです。改行が無いので見づらい。

2018/6/6や6/17時点のindex.html

1<!DOCTYPE html> 2<html> 3<head> 4 <!-- This file is the template for "www/index.html". Modify it to fit your needs --> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 8 9 <!-- The following EJS lines include the necessary CSS and JS 10 from Monaca (cordova.js/ loader.js) in production mode --> 11 12 13<link href="main.css" rel="stylesheet"></head> 14<body> 15 <div id="app"></div> 16<script type="text/javascript" src="bundle.js"></script></body> 17</html>

2018/6/18

1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset=utf-8> 6 <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 7 <meta http-equiv=Content-Security-Policy content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 8 <script type=text/javascript src=components/loader.js></script> 9 <link rel=stylesheet type=text/css href=components/loader.css> 10 <link href=app.css rel=stylesheet> 11</head> 12 13<body> 14 <div id=app></div> 15 <script type=text/javascript src=vendor.bundle.js></script> 16 <script type=text/javascript src=app.bundle.js></script> 17</body> 18 19</html>

投稿2018/06/18 11:51

oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問