admin管理员组文章数量:1416317
I've created a new Laravel project with laravel new test. Then I've ran npm install and npm run dev. I changed the wele.blade.php file to
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" href="{{ mix('js/app.js') }}"></script>
</head>
<body>
<div id="app">
<example-ponent></example-ponent>
</div>
</body>
</html>
and that's the only change I've made. However the page is blank, and the Vue devtools extensions on Chrome says "Vue.js not detected".
Since Laravel provides nearly out-of-the-box support for Vue, I can't see what's going wrong. The relevant files are below (untouched from Laravel's installation).
/resources/js/app.js (which piles successfully with npm run dev to /public/js/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.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue ponents. It will recursively scan this directory for the Vue
* ponents and automatically register them with their "basename".
*
* Eg. ./ponents/ExampleComponent.vue -> <example-ponent></example-ponent>
*/
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vueponent(key.split('/').pop().split('.')[0], files(key).default));
Vueponent('example-ponent', require('./ponents/ExampleComponent.vue'));
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding ponents to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
/resources/js/ponents/ExampleComponent.vue:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example ponent.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
webpack.mix.js:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are piling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-piler": "^2.6.10"
}
}
Again, these are all simply as they get installed.
Any ideas? The blank page is successfully loading the piled app.js file, which looks as it should (e.g. there's mentions of Vue and example-ponent).
I've created a new Laravel project with laravel new test. Then I've ran npm install and npm run dev. I changed the wele.blade.php file to
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" href="{{ mix('js/app.js') }}"></script>
</head>
<body>
<div id="app">
<example-ponent></example-ponent>
</div>
</body>
</html>
and that's the only change I've made. However the page is blank, and the Vue devtools extensions on Chrome says "Vue.js not detected".
Since Laravel provides nearly out-of-the-box support for Vue, I can't see what's going wrong. The relevant files are below (untouched from Laravel's installation).
/resources/js/app.js (which piles successfully with npm run dev to /public/js/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.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue ponents. It will recursively scan this directory for the Vue
* ponents and automatically register them with their "basename".
*
* Eg. ./ponents/ExampleComponent.vue -> <example-ponent></example-ponent>
*/
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.ponent(key.split('/').pop().split('.')[0], files(key).default));
Vue.ponent('example-ponent', require('./ponents/ExampleComponent.vue'));
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding ponents to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
/resources/js/ponents/ExampleComponent.vue:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example ponent.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
webpack.mix.js:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are piling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-piler": "^2.6.10"
}
}
Again, these are all simply as they get installed.
Any ideas? The blank page is successfully loading the piled app.js file, which looks as it should (e.g. there's mentions of Vue and example-ponent).
- Anything in your developer tools console? – Jerodev Commented Jun 17, 2019 at 9:51
- Show me your console errors – Developer Commented Jun 17, 2019 at 9:53
- @Jerodev Afraid not. – user11632242 Commented Jun 17, 2019 at 9:55
-
Odd to see script include using
{{ mix() }}. Have you tried{{ asset() }}instead? I can only think it's including the one fromresourcesrather thanpublic. – Someone Commented Jun 17, 2019 at 10:00 - @Lewis Thanks, it didn't fix it though. The correct app.js file is being loaded by Chrome, just (seemingly) not executed. – user11632242 Commented Jun 17, 2019 at 10:02
4 Answers
Reset to default 2You need to defer your script
<script src="{{ asset('js/app.js') }}" defer></script>
The reason is by doing this:
const app = new Vue({
el: '#app',
});
Javascript will be loaded as soon as it can and the element #app may not have been loaded yet. By defering, the JS will be executed once the document is loaded.
Alternatively, you can use jQuery to wait for the document to be loaded with $(document).ready (but don't use jQuery if you don't need it elsewhere)
Without jQuery: https://stackoverflow./a/800010/8068675
Edit: And as @swonder reminded me, you can also move the script at the bottom of the body. In which case it will be executed after the DOM has been fully loaded.
Try adding forward slash '/' while calling app.js file
<script src="{{ mix('/js/app.js') }}"></script>
The only reason is that the project is not getting proper app.js file's path. You can debug by pressing ctrl+u and check the path of the js file.
Try <script href="{{ asset('js/app.js') }}" defer></script> in the head of the document (like in app.blade.php)
Check your setup in below sequence
You have defined your application URL in .env file. For example, if you have setup your Laravel in test folder,
APP_URL=http://test.local/test/public/
Important! Use src in script tag, not href
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
Check Your app.js is getting loaded correct by looking at developer's console.
本文标签： javascriptVuejs not working on fresh Laravel 58 projectStack Overflow
版权声明：本文标题：javascript - Vue.js not working on fresh Laravel 5.8 project - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745243502a2649449.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论