Vuejs 未从 mixins 读取属性并导出 NOT FOUND 错误。答案

【问题标题】：Vuejs not reading property from mixins and export NOT FOUND error.Vuejs 未从 mixins 读取属性并导出 NOT FOUND 错误。
【发布时间】：2018-02-03 07:40:21
【问题描述】：

这个错误我已经3天了，不确定这是不是bug，但是我从vuejs/vue-cli安装了vuejs

使用以下说明：

npm install -g vue-cli 
vue init webpack foo.com
cd foo.com
npm install
npm run dev

到目前为止它工作正常，现在我在src/ 中创建了一个这样的目录结构

— src
   — assets
   — filters
   — config
   — components
       Profiles.vue
       Login.vue
   profiles.js
   routes.js
   main.js

所以，在routes.js 我有这样的东西。

// routes.js
import ProfilesView from './components/Profiles.vue'
import LoginView from './components/Login.vue'

const routes = [{
  path: '/profiles',
  component: ProfilesView 
},
{
  path: '/login',
  component: LogoutView
}]

export default routes

到目前为止，我对上面的代码没有任何问题，问题来自以下两个文件profiles.js 或Profiles.vue

这里是 profiles.js

const profiles = Vue.mixin({
  data: function () {
    return { profiles: [] }
  },
  methods: {
   fetchProfiles: function(){....},
   mounted: function(){ this.fetchProfiles() }
})

export default profiles

这里是 Profiles.vue

<template lang="html">
  <div> {{ profiles }}<div>
</template>

<script>
  import { profiles } from '../../profiles'
  export default {
    mixins: [profiles],
    data () {
      return { profiles: [] }
    },
    mounted () {}
  }
</script>

<style lang="css">
</style>

使用上面的代码，我得到了这些错误。

profiles.js:1 Uncaught ReferenceError: Vue is not defined
    at Object.<anonymous> (profiles.js:1)
    at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659)
    at fn (bootstrap 1995fd0fa58cb1432d6f:85)
    at Object.defineProperty.value (app.js:55806)
    at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659)
    at fn (bootstrap 1995fd0fa58cb1432d6f:85)
    at Object.<anonymous> (Profiles.vue:7)
    at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659)
    at fn (bootstrap 1995fd0fa58cb1432d6f:85)
    at Object.__webpack_exports__.a (app.js:56033)

如果我将import Vue from 'vue' 添加到profiles.js，则上述错误将替换为以下错误：

Uncaught TypeError: Cannot read property 'components' of undefined
    at checkComponents (vue.esm.js:1282)
    at mergeOptions (vue.esm.js:1363)
    at mergeOptions (vue.esm.js:1379)
    at Function.Vue.extend (vue.esm.js:4401)
    at Object.exports.createRecord (index.js:47)
    at Profiles.vue:26
    at Object.<anonymous> (Profiles.vue:30)
    at __webpack_require__ (bootstrap 625917526b6fc2d04149:659)
    at fn (bootstrap 625917526b6fc2d04149:85)
    at Object.__webpack_exports__.a (app.js:56036)

这是在抱怨profiles.js 中的mixins: [profiles],，我认为profiles 属性未定义，但事实并非如此。出于某种原因，Profiles.vue 没有从profiles.js 读取或读取正确的数据，因为我也总是收到此错误：

[HMR] bundle has 1 warnings
client.js:161 ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Profiles.vue
6:11-15 "export 'profiles' was not found in '../../profiles'

它抱怨在profiles.js 中找不到export default profiles，尽管它显然是这样。我什至尝试使用require，改变路径......一切。没有任何效果。

我将不胜感激。

【问题讨论】：

你能提供一个存储库链接吗？由于您省略了部分代码（这通常有助于提高可读性），因此很难判断错误消息引用了代码的哪些特定部分。
import { profiles } from '../../profiles' 不正确，因为您没有导出具有名为 profiles 的属性的对象。试试import profiles from '../../profiles'
同意@thanksd ！！！另外，如果您只想在本地使用 mixin，请不要使用 (Vue.mixin)[vuejs.org/v2/guide/mixins.html#Global-Mixin]，因为它会创建一个可能与其他组件冲突并导致意外行为的全局 mixin

标签： javascript webpack vue.js vuejs2 babeljs

【解决方案1】：

您以错误的方式导入profiles.js：

import { profiles } from '../../profiles'

既然你用的是export default，那应该是

import profiles from '../../profiles'

【讨论】：