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>
a 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 내가이에 시간을 소비하고 웹에서 문서 내가 browserify 사이에 혼란 스러워요로 매우 명확하지 않다
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');
});
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 파일 및 webpack. 나는 내가 정면에 정통한 사람이 아니라고 말하고 싶다. 앞으로 Vue를 활용할 수 있도록 순서대로 물건을 갖고 싶습니다. 도와 주셔서 감사합니다.
설치 한'npm'과'node'의 버전은 무엇입니까? –
npm 2.15.11 node v6.9.1 – kratos
@Ross Wilson 나는 npm을 3.10.9로 업그레이드했다. 같은 결과. – kratos