无法将 <script> 标签添加到 Vue 组件文件 ( *.vue )答案

【问题标题】：Can't add <script> tag to Vue component files ( *.vue )无法将 <script> 标签添加到 Vue 组件文件 ( *.vue )
【发布时间】：2018-10-01 22:46:45
【问题描述】：

我是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' }
          ]
        }
      }
}

confing/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
    },
    ...

app/javascript/packs/components/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>

app/view/users/home.html.erb

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

【问题讨论】：

app.vue 没有<template>。它必须有一个<template>。
.vue 文件为您的项目提供代码以提供视觉效果，因此需要模板。如果您不想要模板，那么您只需包含一个脚本，因此请使用.js 文件。如果你想在没有模板的情况下使用它，因为你想设置全局应用数据对象，那么你应该在你的 main.js/index.js（加载 Vue 的文件）文件中设置它。

标签： webpack vue.js vue-component babeljs babel-loader

【解决方案1】：

所以你想要一个只有脚本功能的 .vue 组件？不是很清楚。但是注册组件和模板有很多不同的方法。

一种方法是Inline-Templates，对此很有用。您不需要以这种方式注册<template>！

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

【讨论】：