2
你好，我正在獲取app.js中的JS錯誤。基本上它不喜歡require（'./ bootstrap'）;並給出了錯誤：Laravel 5.3和Vue Webpack設置
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 node v6.9.1 – kratos
@Ross Wilson我將npm升級到3.10.9。同樣的結果。 – kratos