无法将<script>标记添加到Vue组件文件（* .vue）

Question

我是 vue.js 的新手。

＆＃xA;＆＃xA;

我正在尝试渲染vue组件文件但是当我添加 ＆lt; script＆gt;＆lt; / script＆gt; 到vue组件，例如 app / javascript / packs / components / app.vue 文件，编译错误发生在 babel-loader中。

＆＃xA;＆＃xA;

错误日志

＆＃xA;＆＃xA;

  ERROR in ./node_modules/babel-loader/lib??ref- -1-0！./ node_modules / vue-loader / lib ?? vue-loader-options！。/ app / javascript / packs / app.vue？vue＆amp; type = script＆amp; lang = js＆＃xA;模块构建失败： ReferenceError：[BABEL] /Users/shiho/dev/appname/app/javascript/packs/app.vue：未知选项：base.omit。查看http://babeljs.io/docs/usage/options/以获取有关选项的更多信息。＆＃xA;＆＃xA;此错误的常见原因是存在没有相应预设名称的配置选项对象。示例：＆＃XA;＆＃XA;无效：＆＃XA; `{presets：[{option：value}]}`＆＃xA;有效：＆＃xA; `{presets：[['presetName'，{option：value}]]}`＆＃xA;＆＃xA;有关预设配置的更多详细信息，请参阅http://babeljs.io/docs/plugins/# 。pluginpresets选项＆＃XA;在Logger.error（/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
在OptionManager.mergeOptions（/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
在OptionManager.init（/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
在File.initOptions（/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/index.js:212:65)
在新文件（/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/file/index.js:135:24)
在Pipeline.transform（/Users/shiho/dev/appname/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
在transpile（/Users/shiho/dev/appname/node_modules/babel-loader/lib/index.js:50:20)
在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＆＃xA; @ ./app/javascript/packs/app.vue

.babelrc

 <代码> {＆＃XA;＆＃XA; “预设”：[＆＃xA; [“env”，{＆＃xA; “modules”：false，＆＃xA; “目标”：{＆＃xA; “browsers”：“＆gt; 1％”，＆＃xA; “uglify”：true＆＃xA; }，＆＃XA; “useBuiltIns”：true＆＃xA; }]＆＃XA; ]，＆＃XA;＆＃XA; “插件”：[＆＃xA; “语法动态导入”，＆＃XA; “变换对象的其余扩”，＆＃XA; [“transform-class-properties”，{“spec”：true}]＆＃xA; ]＆＃xA;}＆＃xA;  

＆＃xA;＆＃xA;

loader

＆＃xA;＆＃xA;

 ％cat config / webpack / loaders / vue.js＆＃xA; const {dev_server：devServer} = require（'@ rails / webpacker'）。config＆＃xA;＆＃xA; const isProduction = process.env.NODE_ENV ==='production '＆＃xA; const inDevServer = process.argv.find（v =＆gt; v.includes（'webpack-dev-server'））＆＃xA;＆＃xA; module.exports = {＆＃xA;测试：/\。vue $ /，＆＃xA; loader：'vue-loader'，＆＃xA;选项：{＆＃xA;装载机：{＆＃xA; js：[＆＃xA; {loader：'babel-loader'}＆＃xA; ]＆＃XA; }＆＃XA; }＆＃XA;}＆＃XA;  

＆＃XA;＆＃XA;

confing /的WebPack / vue.js

＆＃XA;＆＃XA; <预> const {dev_server：devServer} = require（'@ rails / webpacker'）。config＆＃xA;＆＃xA; const isProduction = process.env.NODE_ENV ==='production'＆＃xA; const inDevServer = process.argv.find（v =＆gt; v.includes（'webpack-dev-server'））＆＃xA;＆＃xA; module.exports = {＆＃xA;测试：/\ .vue（\。！bb）？$ /，＆＃xA;使用：[{＆＃xA; loader：'vue-loader'＆＃xA; }]＆＃XA;}＆＃XA; ＆＃XA;＆＃XA;

app.vue

＆＃XA;＆＃XA;

 <代码>＆lt; script＆gt;＆＃xA; export default {＆＃xA; data：function（）{＆＃xA;返回{＆＃xA;消息：“你好Vue！”＆＃xA; }＆＃XA; }＆＃xA;}＆＃xA;＆lt; / script＆gt;＆＃xA;  

＆＃xA;＆＃xA;

即使我删除 presets 来自.babelrc，发生了同样的错误。

＆＃xA;＆＃xA;

 从'vue / dist / vue.esm'导入Vue＆＃xA;从'vue-infinite-导入InfiniteLoading loading';＆＃xA;从'./components/Item.vue'和#xA;＆＃xA ;window.onload = function（）{＆＃xA;＆＃xA; var highlightViewModel = new Vue {{ ＆＃xA; el：'＃home-wrapper'，＆＃xA; data：{＆＃xA; show：false，＆＃xA; loading：false，＆＃xA; message：''，＆＃xA; items ：[]，＆＃xA; message：'helloooo'，＆＃xA;}，＆＃xA; beforeMount：function（）{＆＃xA; var that = this＆＃xA; var params = {＆＃xA; url ：'/ item /get_timeline.json'，＆＃xA;方法：'GET'＆＃xA;}＆＃xA; $ .ajax（params）.done（function（data）{＆＃xA; console.log（ data.items）;＆＃xA; that.items = data.items;＆＃xA; Vue.nextTick（function（）{＆＃xA; $（'。timeago'）。timeago（）;＆＃xA;＆ #xA;}）;＆＃xA; }）;＆＃XA; }，＆＃XA;组件：{＆＃xA; InfiniteLoading，＆＃XA;项目＆＃XA; }，＆＃XA; ...＆＃xA;  

＆＃xA;＆＃xA;

app / javascript / packs / components / Item.vue

＆＃xA;＆＃xA; <预> <代码>＆LT;模板＆GT;＆＃XA; ＆LT; DIV＆GT;＆＃XA; ＆LT; H3＆GT; AAA＆LT; / H3＆GT;＆＃XA; ＆lt; / div＆gt;＆＃xA;＆lt; / template＆gt;＆＃xA;＆＃xA;＆lt;！ - 如果我删除下面的脚本标记，则错误消失，“aaa”呈现与items.count一样多.-- ＆GT;＆＃XA;＆LT;脚本＆GT;＆＃XA;＆LT; /脚本＆GT;＆＃XA; ＆＃XA;＆＃XA;

应用程序/视图/用户/家庭。 html.erb

＆＃xA;＆＃xA;

 ＆lt; item v-for =“item in items”：article =“item”：key =“item.id”＆gt;＆lt; ; /项目＆GT;＆＃XA;  

＆＃XA;

Answer 1

因此，您需要一个仅具有脚本功能的.vue组件？不太清楚。但是注册组件和模板的方式有很多。

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

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