webpack vue 报错

Question

Uncaught SyntaxError: Unexpected token export

package

{
  "name": "vueproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "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"
  }
}

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/,
          query: {
                  presets: ['es2015'],
                  plugins: ['transform-runtime']
                }
      },
      //解析.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'
        }
    }    
}

这个是什么意思，请问怎么解决

Answer 1

先安装babel

$ npm install --save-dev babel-cli babel-preset-es2015

Answer 2

https://segmentfault.com/q/10...
和你的问题类似。

Answer 3

export default是es6的。要么用babel编译。要么用module.exports= 替换export default应该也可以。
我没用webpack打包过vue，但是我看你的webpack.config.js里貌似对vue转化的时候没有用es2015转码规则。

vue:{
    loaders:{
      js:'babel'
    }
}

这边js里改成这样看看呢

js: 'babel?presets[]=es2015'

不确定有效啊

Answer 4

谢邀，各大浏览器对于ES6支持不是很好，建议处理一下，方案其他人都说了，要不就是引入一个包，要不就是降级es5