CDN読み込みではうまくいくが, npm installで追加したmoduleをうまく読み込めない,(Laravel5.5)

実現したいこと

Laravel5.5(homestead使用)にてvue-routerを使用したい
→CDNを使用すると動く
→ファイルを読み込むと動かない、ファイル読み込みでも動くようにしたい

試したこと

npm install --save vue-router
npm install --save require.js //requireもundefinedになっていたのでinstall
```を実行

//package.jsonの一部
"dependencies": {
"express": "^4.16.3",
"vue-router": "^3.0.1"
"require.js": "^1.0.0"
}



**該当コード(一部省略)**
---
現状は
Uncaught ReferenceError: VueRouter is not defined
Uncaught ReferenceError: require is not defined
のエラー。
「js/app.jsの取り込み部分(npm run dev実行済)」

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

「表示部分のファイル」

//head内にてapp.js読み込み(**ここをCDNでvue-routerを読み込むとうまくいく)

よろしくお願いいたします。

追記

すみません、書き忘れていましたがapp.jsにコードを書いてnpm run dev実行はしておりました。
しかし下記のようなエラーがconsoleにて出力されます

[Vue warn]: Cannot find element: #app
(index):281 Uncaught ReferenceError: Vue is not defined

app.jsのコードはこちらです


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

import Vue from 'vue'
import VueRouter from 'vue-router'
import VuePassword from 'vue-password'
Vue.use(VueRouter)

require('./bootstrap');

// window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('navbar', require('./components/layouts/navbar.vue'));
Vue.component('example-component', require('./components/ExampleComponent.vue'));



const about_us = { template: '<div>About us!</div>' }
const blog = { template: '<div>bloooog</div>' }
const contact = { template: '<div>contakttt</div>' }
const login = { template: '<div>loginnn</div>' }

//ルートの設定
const router = new VueRouter({
    mode: 'history',
    routes :[
        { path: '/about_us', component: require('./components/ExampleComponent.vue') },
        { path: '/blog', component: blog },
        { path: '/contact', component: contact },
        { path: '/login', component: login }
    ]
});
const app = new Vue({
    router
}).$mount('#app')

よろしくお願いいたします。

Lulucom

2018/04/26 23:00

VueRouterでの設定を2箇所（app.jsとBlade）でされているのでしょうか。（ご質問に追記/修正ください）

行動規範の内容に同意します

回答2件

ベストアンサー

scriptをhtml本体に入れると動きません。
cross-env(npm run dev)でコンパイルするなら、
resources/assets/js/app.jsの方にコーディングしてください。

投稿2018/04/26 11:23

退会済みユーザー

総合スコア0

Lulucom

2018/04/26 11:45

あ、ほんとだ、確かにそうですね。

kazoogon

2018/04/26 16:18

本文にコードも含め追記致しました。恐縮ですが、確認よろしくお願いいたします。

退会済みユーザー

2018/04/26 20:50

npm install vue --save

退会済みユーザー

2018/04/26 21:18

すいません。寝ぼけてました。 Cannot find element: #app #appの要素がみつかりません、、ですねなぜ見つからないのか。。これはapp.jsを読み込んだ（即実行の）時点で#appがみつからないということです。解決方法としては、 ①jsの読み込みをhtmlのロード後まで待たせる(defer) <script src="{{ mix('js/app.js') }}" defer></script> ②<body>内の最終要素として<script>を挿入する <body> 　<div id="app"> 　　<nav class="navbar navbar-expand-lg navbar-light bg-light"> 　。。。略。。。　　</nav> 　　<router-view></router-view> 　</div> 　<script src="{{ mix('js/app.js') }}"></script> <body>

kazoogon

2018/04/27 00:31

退会済みユーザー

2018/04/27 01:15

app.jsは基本モジュールの読み込みだけ記載するようにしてください。 jsの基本でいけばモジュール化だったり、 Vueの基本でいけばvueを単一コンポーネントファイル(**.vue)にわけるだったり、頑張ってください。

kazoogon

2018/04/27 02:28

あ、、これ「Vue is not defined」が出ますね。。。なのになぜvue routerは使えるのか。。。　？？

退会済みユーザー

2018/04/27 02:35

vue rooter が動いてるってことは、app.jsは止まらずに完了してると思います。 HTMLの方の<script>が残ってるとか

kazoogon

2018/04/27 03:09

HTMLの<script>が残ってる　というのは、html側には<script>タグを記載しないということでしょうか。。？？(こちらの勘違いだとは思いますが。。)

退会済みユーザー

2018/04/27 03:15

いえいえ、見当違いな指摘ですいません。 HTMLで下のうほうに入れてた　const app = new Vue({ 云々が残っているなら動いてるのにVue is not definedが出るという症状になります。ということです。

kazoogon

2018/04/27 03:48

html側のその記述はすでに消しております。。汗

退会済みユーザー

2018/04/27 03:51

IS NULL ASC　とか便利なのもありますし、結構NULL関連優遇されてますよ

kazoogon

2018/04/27 04:00

???

退会済みユーザー

2018/04/27 04:04

すいません。コメント先間違えました。スマホじゃメンドイww

kazoogon

2018/04/27 04:12

「IS NULL ASC」とかいう便利なtoolがあるのかと思ってググってました（笑）

退会済みユーザー

2018/04/27 05:35

[Vue warn]: Cannot find element: #app (index):281 Uncaught ReferenceError: Vue is not defined エラーはまだこのままでしょうか？ index 281 変わってないようであれば、ブラウザでページのソースを表示させて281行目あたりを確認したいですね

退会済みユーザー

2018/04/27 05:42

ブラウザのソースコードにjavascriptがまだ埋まってるならlaravelのbladeファイルが古い日付だったりして古いキャッシュが表示されてたりするのでキャッシュクリア php artisan view:clear

kazoogon

2018/04/27 06:12

[Vue warn]: Cannot find element: #app →このエラーは出ない (index):281 Uncaught ReferenceError: Vue is not defined→htmlのscriptタグ内にてnew Vueするところまたキャッシュクリアしても変化はありませんでした。。

退会済みユーザー

2018/04/27 06:15

ソースコードには”htmlのscriptタグ内にてnew Vue”があるってことですか？

kazoogon

2018/04/27 06:22

はい。もしかして、そこもapp.jsに記載する必要があるということですか？？

退会済みユーザー

2018/04/27 06:27

はい、以下シンプルなapp.jsです。 import VueRouter from 'vue-router' import myvuex from './vuex.js' import Vuex from 'vuex' import makeRouter from './router/router.js' require('./bootstrap') window.Vue = require('vue') Vue.config.devtools = true Vue.use(Vuex) Vue.use(VueRouter) const store = new Vuex.Store(myvuex) const router = makeRouter(VueRouter) const app = new Vue({ el: '#app', router: router, store: store })

退会済みユーザー

2018/04/27 06:31

って、上記のapp.jsにはnew Vueありますね。ヘッダのmix(app.js)は必要ですが、 body内の<script>は全部不要です。

kazoogon

2018/04/27 07:39

new Vueしているとこはapp.js に基本は記載　 →これだとhtmlで表示させたいvue.jsの変数がそのまま文字式で出ますね。。

退会済みユーザー

2018/04/27 07:45

でもまずはそこからです。今出てるエラーは?

kazoogon

2018/04/27 08:32

const now = new Date(); とhtmlのscript内に記載しているのですが・Property or method "now" is not defined on the instance but referenced during render ・Error in render: "TypeError: Cannot read property 'setDate' of undefined" ・Cannot read property 'setDate' of undefined とjsで日時をとってくるコードでエラー　→ここを消すとエラーなく、通常に表示される　→script内の記述は全てapp.js???

退会済みユーザー

2018/04/27 10:28

はい全てです

退会済みユーザー

2018/04/27 12:53

突然申し訳ないです。他の質問でですが、他の回答者とのやりとりでちょっと思うところありまして、一旦退会させてもらうことにしました。この問題もだいぶ解決に近づいたかと思います。無事解決されることを祈ります。

行動規範の内容に同意します