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>

一些-page.js：

export default {
    name: 'contact', 

    data() {
        return {
            title: 'Contact',
            content: 'Foo'
        }
    }
}

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

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

在
中找到
---＆GT;           在src \ App.vue

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

我的项目不使用run和compile。跑步，我想保持这种方式。问题是webpack＆amp; /或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>

<强>一些-page.js：

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

配置Babel以编译外部js文件

1 个答案: