v-for="key in columns" 无法由 Vue 中的 webpack 构建？答案

【问题标题】：v-for="key in columns" was unable to built by webpack in Vue?v-for="key in columns" 无法由 Vue 中的 webpack 构建？
【发布时间】：2016-09-27 19:09:42
【问题描述】：

我打算使用webpack 将Vue 演示组件构建到我的项目中，但出现以下错误，请告诉我发生了什么？

ERROR in ./~/babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/pms/dashboard.vue
Module build failed: SyntaxError: D:/WorkSpace/YongTai/src/components/pms/dashboard.vue: Unexpected token (2:0)
  <  th v-for="key in columns"
    at Parser.pp.raise (D:\WorkSpace\YongTai\node_modules\babylon\lib\parser\location.js:22:13)
    at Parser.pp.unexpected (D:\WorkSpace\YongTai\node_modules\babylon\lib\parser\util.js:89:8)

我的vue 代码包括以下代码行：

script type="text/x-template" id="grid-template">
< table>< t head> < tr>< t h v-for="key in columns"

【问题讨论】：

删除< table、< t h等内部的空格
我的代码中没有空格，为了在stackoverflow中显示代码，我不得不添加一些空格。
它刚刚击中了我！您应该在 vue 文件中使用 <template> 标签而不是 <script type= ... 。

标签： webpack vue.js

【解决方案1】：

你有没有正确的 webpack 配置文件和 babel builder 并在单独的文件中支持 vue 组件？

我的webpack.config.js

const webpack = require('webpack');
module.exports = {
  // the main entry of our app
  entry: ['./src/index.js', './src/auth/index.js'],
  // output configuration
  output: {
    path: __dirname + '/build/',
    publicPath: 'build/',
    filename: 'build.js'
  },

  module: {
    loaders: [
      // process *.vue files using vue-loader
      { test: /\.vue$/, loader: 'vue' },
      { test: /\.html$/, loader: 'html' },
      // process *.js files using babel-loader
      // the exclude pattern is important so that we don't
      // apply babel transform to all the dependencies!
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
    ]
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
}

在 vue.js 中，表格的好选择是使用 vue-tables

【讨论】：