使用webpack捆綁vuejs 2組件的問題

Question

我正在遷移到vuejs 2，並且我的vue組件有一個非常奇怪的問題。當我需要（）的組分，我接收在所述的WebPack捆綁過程如下錯誤：

ERROR in Unexpected token > 

該錯誤的行號是其中要求（）調用來加載組件。

這是我收到錯誤的測試組件的例子：

<template> 
    <div> 
     <button>test</button> 
    </div> 
</template> 

<script> 
    module.exports = { 
     data: function() { 
      return { 

      } 
     } 
    } 
</script> 

我webpack.config.js文件是：

const webpack = require('webpack'); 
require('es6-promise').polyfill(); 
var path = require("path"); 

module.exports = { 
    entry: { 
     ... 
    }, 
    output: { 
     //path: path.join(__dirname, "./dist/js"), 
     path: './', 
     filename: "[name].bundle.js", 
     chunkFilename: "[id].chunk.js" 
    }, 
    devServer: { 
     ... 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.vue$/, 
       loader: 'vue' 
      }, 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       // make sure to exclude 3rd party code in node_modules 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.css$/, 
       loader: "style-loader!css-loader" 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loaders: [ 
        'file?hash=sha512&digest=hex&name=[hash].[ext]', 
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
       ] 
      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2)$/, 
       loader: 'file?name=public/fonts/[name].[ext]' 
      } 
     ] 
    }, 
    vue: { 
     loaders: { 
      js: 'babel-loader' 
     } 
    }, 
    resolveLoader: { 
     root: __dirname + '/node_modules' 
    }, 
    resolve: { 
     alias: { 
      'vue': 'vue/dist/vue' 
     } 
    } 
}; 

任何幫助將是非常讚賞。我已經在這個幾個小時內陷入了困境。

Answer 1

我其實已經想通了。相反，我找出了什麼是錯的，以及如何解決它。基本上，webpack與任務運行器的visual studio集成不再適用於vue 2.我不知道爲什麼。但是，只需從命令行運行命令就可以完美工作，並且無論如何要容易得多。