Laravel 5.3 和 Vue Webpack 设置

Posted 2023-02-22

【中文标题】Laravel 5.3 和 Vue Webpack 设置

【英文标题】：Laravel 5.3 and Vue Webpack setup

【发布时间】：2017-03-07 21:57:33

【问题描述】：

您好，我在 app.js 中遇到 JS 错误。基本上它不喜欢 require('./bootstrap');并给出错误：

all.js:50750 Uncaught ReferenceError: require is not defined

我的 app.js：

/**
 * First we will load all of this project's javascript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * 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('example', require('./components/Example.vue'));

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

我的 package.json：

  "private": true,
  "scripts": 
    "prod": "gulp --production",
    "dev": "gulp watch"
  ,
  "devDependencies": 
    "bootstrap-sass": "^3.3.7",
    "buble": "^0.13.2",
    "buble-loader": "^0.3.1",
    "css-loader": "^0.25.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "style-loader": "^0.13.1",
    "vue": "^2.0.3",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^9.7.0",
    "vue-resource": "^1.0.3",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.2"
  

Example.Vue：

    <template>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">Example Component</div>

                        <div class="panel-body">
                            I'm an example component!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

<script>
    export default 
        mounted() 
            console.log('Component ready.')
        
    
</script>

我还有一个 webpack.config.js：

'use strict'

const path  = require('path')

module.exports = 
    module: 
        loaders: [
            
                test: /\.js$/,
                include: path.join(__dirname, 'resources/assets'),
                exclude: /node_modules/,
                loader: 'buble',
            ,
            
                test: /\.vue$/,
                loader: 'vue',
            ,
            
                test: /\.css$/,
                loader: 'style!css'
            ,
        ]
    ,

bootstrap.js 文件

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => 
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
);

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo(
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// );

我的 gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-webpack-official');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */
var paths = 
    'cssstyles': 'resources/assets/css/',
    'jsscripts': 'resources/assets/js/',

    'adminlte': 'vendor/bower_components/AdminLTE/',
    'bootstrap': 'vendor/bower_components/bootstrap/',
    'chartjs': 'vendor/bower_components/Chart.js/dist/',
    'fastclick': 'vendor/bower_components/fastclick/',
    'fontawesome': 'vendor/bower_components/font-awesome/',
    'jquery': 'vendor/bower_components/jquery/',
    'slimscroll': 'vendor/bower_components/slimScroll/',
    'datatables': 'vendor/bower_components/datatables.net/',
    'moment': 'vendor/bower_components/moment/',
    'bootstrapgrowl': 'vendor/bower_components/bootstrap-growl/'


elixir.config.sourcemaps = false;


elixir(function(mix) 
    mix.sass('app.scss', paths.cssstyles)
        .styles([
            paths.bootstrap + 'dist/css/bootstrap.css',
            paths.fontawesome + 'css/font-awesome.css',
            paths.adminlte + 'plugins/datatables/dataTables.bootstrap.css',
            paths.adminlte + 'dist/css/AdminLTE.css',
            paths.adminlte + 'dist/css/skins/skin-blue.css',
            paths.adminlte + 'plugins/select2/select2.css',
            paths.cssstyles + 'dataTables.fontAwesome.css',
            paths.cssstyles + 'app.css'
        ], 'public/css/', './')

        .scripts([
            paths.jquery + "dist/jquery.js",
            paths.moment + 'moment.js',
            paths.bootstrap + "dist/js/bootstrap.js",
            paths.datatables + "js/jquery.dataTables.js",
            paths.fastclick + "lib/fastclick.js",
            paths.adminlte + "dist/js/app.js",
            paths.adminlte + 'plugins/daterangepicker/daterangepicker.js',
            paths.adminlte + 'plugins/select2/select2.js',
            paths.adminlte + 'plugins/datatables/dataTables.bootstrap.js',
            paths.slimscroll + "jquery.slimscroll.js",
            paths.chartjs + "Chart.js",
            paths.bootstrapgrowl + 'jquery.bootstrap-growl.js',
            paths.jsscripts + "app.js"
        ], 'public/js/', './')


    mix.webpack('app.js');

);

我在这方面花了几个小时，网络上的文档不是很清楚，因为我对 browserify 和 webpack 感到困惑。我确实想说我不是很精通前端。只是想把事情整理好，以便将来可以使用 Vue。谢谢您的帮助。

【问题讨论】：

你安装了npm和node的哪个版本？

npm 2.15.11 节点 v6.9.1

@Ross Wilson 我将 npm 升级到 3.10.9。结果相同。

gulp 文件时没有错误？

@WebKenth 没有错误。 :(

【参考方案1】：

真傻。我没有包括生成的 JS 文件。感谢所有对此进行尝试的人。