配置Babel编译外部js文件答案

【问题标题】：Configure Babel to compile external js file配置Babel编译外部js文件
【发布时间】：2018-09-22 16:48:57
【问题描述】：

所以我有一个 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'
        }
    }
}

当我运行我的代码时，我收到以下错误：

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

发现于

---> 在 src\App.vue

其他人也遇到过同样的错误，对此有一个 SO 发布/解决方案，但该发布解决方案是使用运行和编译模式（我不希望这样做 - 我们使用 es6，所以并非所有浏览器都支持这个）或者在模板中添加一个空的 div，这也不能解决我的问题。

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

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

【问题讨论】：

您将js 与vue 分开是有原因的吗？从技术上讲，*.vue 是一个由 webpack 编译的js 文件
@Jag 所以我们可以分开开发，一个开发者做 html，另一个做 es6。
Vue template or render function not defined yet I am using neither?的可能重复
@Sandwell 对上述 SO 帖子的建议解决方案是使用我不希望使用的运行时构建。
@JakeM 考虑过使用 mixins 导入的可能性吗？

标签： vue.js vuejs2 babeljs

【解决方案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>

some-page.js：

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

【讨论】：