我整天都在尝试让它工作,但没有成功,如果有人能帮忙指点一下,那将不胜感激。
我正在尝试设置用于处理ES6文件以及使用Webpack处理Vue的环境。
我已经安装了所有依赖项,并创建了以下文件:
webpack.config.js
module.exports = {
entry: './resources/assets/source/js/app.js',
output: {
filename: 'app.js'
},
devtool: 'source-map',
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue'
}
]
}
};
gulpfile.js
var gulp = require('gulp'),
webpack = require('webpack-stream');
gulp.task('script', () => {
"use strict";
return gulp.src('./resources/assets/source/js/app.js')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('./public/assets/js/'));
});
gulp.task('default', ['script']);
resources/assets/source/js/app.js
var Vue = require('vue');
import Alert from './components/Alert.vue';
new Vue({
el: '#app',
components: { Alert },
ready() {
alert('ready');
}
});
resources/assets/source/js/components/Alert.vue
<template>
<div :class="alertClasses" v-show="show">
<slot></slot>
<span class="Alert__close" @click="show == false">x</span>
</div>
</template>
<script>
export default {
props: ['type'],
data() {
return {
show: true
};
},
computed: {
alertClasses() {
var type = this.type;
return {
'Alert': true,
'Alert--Success': type == 'success',
'Alert--Error': type == 'error'
};
}
}
};
</script>
当我运行gulp
时,所有内容都会被打包和编译,但是当我在浏览器中运行它时,指向resources/assets/source/js/app.js
文件中的某一行,出现了Uncaught SyntaxError: Unexpected token import
错误。
经过数小时的尝试仍然无法找到原因,我已经快要放弃了,希望能得到任何帮助。
'/\.(js|vue)$/'
中删除引号 - 当您需要将其作为正则表达式时,它可能会被解析为字符串。 - Aurora0001webpack.config.js
的loaders
列表中添加另一个元素,使用vue-loader来处理.vue
文件,而不是Babel。 - Aurora0001