Question

我计划使用webpack将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"代码包含以下代码行：

 $("#calendar").fullCalendar() {
    ...
    , events: function(start, end, timezone, callback) {
        start.subtract(2, 'months');
        end.add(2, 'months');
        //ajax call that fetches data for 4 months using start and end as parameters
}

Answer 1

您是否拥有正确的webpack配置文件以及babel构建器并支持单独文件中的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

v-for =“key in columns”无法通过Webpack在Vue中构建？

1 个答案: