vue.js - vue2.0 问题求助
本文介绍了vue.js - vue2.0 问题求助的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
Uncaught SyntaxError: Unexpected token import
Uncaught SyntaxError: Unexpected token exportvue2.0提示这个错误，请问如何解决，谢谢了
main.js
import Vue from 'vue'
import App from './components/app.vue'
new Vue({
el: 'body',
components:{App}
});app.vue
<template>
<div class="message">{{msg}}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader'
}
}
}
</script>
<style>
.message{
color:red;
font-size:36px;
font-weight:blod;
}
</style>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue example</title>
</head>
<body>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>webpack.config
var path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath:'dist/',
filename: 'build.js'
},
//配置自动刷新,如果打开会使浏览器刷新而不是热替换
/*devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true
},*/
module: {
loaders: [
//转化ES6语法
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
//解析.vue文件
{
test:/\.vue$/,
loader:'vue'
},
//图片转化，小于8K自动转化为base64的编码
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]
},
vue:{
loaders:{
js:'babel'
}
},
resolve: {
// require时省略的扩展名，如：require('app') 不需要app.js
extensions: ['', '.js', '.vue'],
// 别名，可以直接使用别名来代表设定的路径以及其他
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components'),
'vue': 'vue/dist/vue.js'
}
}
}package.json
{
"name": "vueproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.18.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue": "^2.0.3",
"vue-hot-reload-api": "^2.0.6",
"vue-html-loader": "^1.2.3",
"vue-loader": "^9.7.0",
"vue-style-loader": "^1.0.0",
"webpack-merge": "^0.15.0"
},
"dependencies": {
"vue": "^2.0.3",
"vue-cli": "^2.4.0"
}
}
解决方案
这个和vue2.0应该没关系吧，而是当前浏览器不支持import语法，要么换成require，要么就用bable
配置语法请详见文档,如下
https://github.com/babel/babe...
loaders: [
//转化ES6语法
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
},
//解析.vue文件
{
test:/\.vue$/,
loader:'vue'
},
//图片转化，小于8K自动转化为base64的编码
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]这篇关于vue.js - vue2.0 问题求助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
