Vue.js 不适用于新的 Laravel 5.8 项目答案

【问题标题】：Vue.js not working on fresh Laravel 5.8 projectVue.js 不适用于新的 Laravel 5.8 项目
【发布时间】：2019-10-30 21:33:47
【问题描述】：

我用laravel new test 创建了一个新的 Laravel 项目。然后我跑了npm install 和npm run dev。我将welcome.blade.php 文件更改为

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" href="{{ mix('js/app.js') }}"></script>
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
    </body>
</html>

这是我所做的唯一改变。但是页面是空白的，Chrome 上的 Vue devtools 扩展显示“未检测到 Vue.js”。

由于 Laravel 为 Vue 提供了几乎开箱即用的支持，我看不出哪里出了问题。相关文件如下（Laravel 安装未修改）。

/resources/js/app.js（用npm run dev编译成功到/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 components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('example-component', require('./components/ExampleComponent.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.
 */

const app = new Vue({
    el: '#app',
});

/resources/js/components/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 component.
                    </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 compiling 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-compiler": "^2.6.10"
    }
}

同样，这些都是安装后的样子。

有什么想法吗？空白页已成功加载编译后的 app.js 文件，看起来应该是这样（例如，提到了 Vue 和 example-component）。

【问题讨论】：

您的开发者工具控制台中有任何内容吗？
显示你的控制台错误
@Jerodev 不怕。
奇怪地看到脚本包括使用{{ mix() }}。您是否尝试过{{ asset() }}？我只能认为它包括来自resources 而不是public 的那个。
@Lewis 谢谢，但它没有解决它。 Chrome 正在加载正确的 app.js 文件，只是（似乎）没有执行。

标签： javascript php laravel vue.js npm

【解决方案1】：

你需要defer你的脚本

<script src="{{ asset('js/app.js') }}" defer></script>

原因是这样做的：

const app = new Vue({
    el: '#app',
});

Javascript 将尽快加载，元素 #app 可能尚未加载。通过延迟，JS 将在文档加载后执行。

或者，您可以使用 jQuery 来等待文档被 $(document).ready 加载（但如果您在其他地方不需要，请不要使用 jQuery）

没有 jQuery：https://stackoverflow.com/a/800010/8068675

编辑：正如@swonder 提醒我的那样，您还可以将脚本移动到正文的底部。在这种情况下，它将在 DOM 完全加载后执行。

【讨论】：

这个，或者把<script>贴在你的body标签底部。只是在您运行 javascript 时尚未加载 #app。
这给了我一个syntax error, unexpected 'defer'

【解决方案2】：

尝试在调用app.js 文件时添加正斜杠'/'

<script src="{{ mix('/js/app.js') }}"></script>

唯一的原因是项目没有得到正确的app.js 文件路径。可以按ctrl+u调试，查看js文件的路径。

【讨论】：

对不起，您的回答不相关。斜杠不是强制性的，因为mix handle that 和@user11632242 已经表示该文件已被chrome加载但未执行

【解决方案3】：

在文档头部尝试<script href="{{ asset('js/app.js') }}" defer></script>（如在 app.blade.php 中）

【讨论】：

【解决方案4】：

按以下顺序检查您的设置

您已在 .env 文件中定义了您的应用程序 URL。例如，如果您已将 Laravel 设置在 test 文件夹中，

APP_URL=http://test.local/test/public/

重要！在脚本标签中使用 src，而不是 href

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

通过查看开发者控制台检查您的 app.js 是否正确加载。

【讨论】：

APP_URL 的目的是作为后备，让 Laravel 知道他不能知道的域名是什么例如：Job 或 Command。 Laravel 已经从超级全局 $_SERVER 知道了当前的 APP_URL，所以它不会让它工作。
asset 函数的参数相对于APP_URL。所以，如果你已经在子文件夹中安装了 Laravel 并且你正在使用asset 函数，你需要定义APP_URL。
请编辑您仅涉及子文件夹的答案。此答案不适用于正确的 laravel 设置，而原始问题并非如此。
我在 OP 的代码中发现了一个可能的问题，他在 <script> 标签中使用了 href 而不是 src。所以，app.js 根本不会加载。
引用：“Chrome 正在加载正确的 app.js 文件，只是（似乎）没有执行。– user11632242 Jun 17 at 10:02” 这不是问题相对于路径。这是一个与 deferring 相关的问题