您好，我在 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"
}
}
例子.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。谢谢您的帮助。
最佳答案
太傻了。我没有包括生成的 JS 文件。感谢所有为此付出努力的人。
关于Laravel 5.3 和 Vue Webpack 安装，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40246950/