配置 Babel 编译外部 js 文件

Question

所以我有一个 vue 组件，我将每个 vue 组件分成 2 个文件。例如;

SomePage.vue：

<template>
<b-container>
<h1>{{ title }}</h1>
<b-row>
<b-col>
{{ content }}
</b-col>
</b-row>
</b-container>
</template>
<style lang="scss" scoped>
</style>
// Make babel comple this now not at run time
<script type="text/javascript" src="./some-page.js"></script>

某页.js：

export default {
name: 'contact', 
data() {
return {
title: 'Contact',
content: 'Foo'
}
}
}

当我运行代码时，出现以下错误：

供应商.js：66537 [Vue 警告]：无法挂载组件：未定义模板或渲染函数。

发现于

---> at src\App.vue

其他人也遇到了同样的错误，并且有一个SO post/解决方案，但该post解决方案是使用运行和编译模式(我不想这样做 - 我们使用es6，所以并非所有浏览器都支持此功能)或添加一个空div到模板，这也不能解决我的问题。

我的项目不使用运行和编译。只要跑吧，我想保持这种状态。问题是 webpack 和/或 babel 没有编译模板(或者可能是外部 js)。

有没有办法配置 Babel 或 WebPack 或 Vue.js来解决这个问题？

Answer 1

只需通过 mixim 导入，示例...

SomePage.vue：

<template>
<b-container>
<h1>{{ title }}</h1>
<b-row>
<b-col>
{{ content }}
</b-col>
</b-row>
</b-container>
</template>
<style lang="scss" scoped>
</style>
<script>
import { contact } from '../some-page'
export default {
mixins : [
contact
],
}
</script>

某页.js：

export const contact = {
data() {
return {
title: 'Contact',
content: 'Foo'
}
}
}