无法添加标签的Vue组件文件（* .vue）

Question

我是新来vue.js。

我试图渲染VUE组件文件，但是当我添加<script></script>到VUE组件，例如，app/javascript/packs/components/app.vue文件，编译错误babel-loader发生。

错误日志

ERROR in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/packs/app.vue?vue&type=script&lang=js
Module build failed: ReferenceError: [BABEL] /Users/shiho/dev/appname/app/javascript/packs/app.vue: Unknown option: base.omit. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.
    at Logger.error (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
    at OptionManager.init (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/shiho/dev/appname/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/Users/shiho/dev/appname/node_modules/babel-loader/lib/index.js:173:20)
 @ ./app/javascript/packs/app.vue?vue&type=script&lang=js 1:0-178 1:199-374
 @ ./app/javascript/packs/app.vue

.babelrc

{

  "presets": [
    ["env", {
      "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
    }]
  ],

  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

装载机

% cat config/webpack/loaders/vue.js
const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))

module.exports = {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
          js: [
            { loader: 'babel-loader' }
          ]
        }
      }
}

配置/的WebPack / vue.js

const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader'
  }]
}

app.vue

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

甚至当我从.babelrc删除presets，发生同样的错误。

import Vue from 'vue/dist/vue.esm'
import InfiniteLoading from 'vue-infinite-loading';
import Item from './components/Item.vue'

window.onload = function() {

var highlightViewModel = new Vue({
    el: '#home-wrapper',
    data: {
        show: false,
        loading: false,
        message: '',
        items: [],
        message: 'helloooo',
    },
    beforeMount: function () {
        var that = this
        var params = {
            url: '/items/get_timeline.json',
            method: 'GET'
        }
        $.ajax(params).done(function(data){
            console.log(data.items);
            that.items =  data.items;
            Vue.nextTick(function () {
                $('.timeago').timeago();

            });
        });
    },
    components: {
        InfiniteLoading,
        Item
    },
    ...

应用程序/ JavaScript的/包/组件/ Item.vue

<template>
  <div>
    <h3>aaa</h3>
  </div>
</template>

<!-- if I remove script tag below, error disappears and "aaa" rendered as much as items.count.-->
<script>
</script>

应用程序/视图/用户/ home.html.erb

<item v-for="item in items" :article="item" :key="item.id"></item>

Answer 1

所以，你想要的只是有脚本功能的.vue成分？不太清楚。但也有很多的注册组件和模板的不同方式。

一种方法中，是Inline-Templates这对于这个有用的。你并不需要这样注册<template>！

https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates