Vue.js在Ubuntu 17.10上失败了

时间:2018-01-17 11:45:33

标签: javascript node.js ubuntu npm vue.js

我在服务器上运行Vue.js应用程序时遇到问题。当我在macOS或windows上本地运行时,它工作正常。这是运行'npm run dev'时出现的错误:

These dependencies were not found:

* @/components/account/Profile in ./src/router/index.js
* @/components/account/Plan in ./src/router/index.js
* @/components/account/Team in ./src/router/index.js
* @/components/account/Integration in ./src/router/index.js
* babel-runtime/helpers/extends in ./src/store/index.js

我已检查过安装了相同版本的Vue.js - > vue@2.5.13 +真的不知道如何解决这个问题。我猜这是一个依赖/操作系统错误,因为它在本地运行没有错误。

有没有人知道解决这个问题或者指出我有用的地方?非常感谢任何帮助!

编辑***

下面的Index.js的内容 - 我正在使用Webpack。

import store from '../store'
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Error404 from '@/components/404'
import Login from '@/components/Login'
import Register from '@/components/Register'
import FreeTrial from '@/components/FreeTrial'
import Product from '@/components/Product'
import Services from '@/components/Services'
import Team from '@/components/Team'
import Pricing from '@/components/Pricing'
import Help from '@/components/Help'
import SharedList from '@/components/SharedList'
import ListView from '@/components/App/ListView'
import Blog from '@/components/Blog'

// Account components, loaded lazily
const AccountSettings = r =>
  require.ensure([], () => r(require('@/components/AccountSettings')), 'accountComponents')

const ProfileSection = r =>
  require.ensure([], () => r(require('@/components/account/Profile')), 'accountComponents')

const PlanSection = r =>
  require.ensure([], () => r(require('@/components/account/Plan')), 'accountComponents')

const TeamSection = r =>
  require.ensure([], () => r(require('@/components/account/Team')), 'accountComponents')

const IntegrationSection = r =>
  require.ensure([], () => r(require('@/components/account/Integration')), 'accountComponents')

// App components loaded lazily, grouped by the 'appComponents' param
const MainApp = r =>
  require.ensure([], () => r(require('@/components/MainApp')), 'appComponents')
const Default = r =>
  require.ensure(
    [],
    () => r(require('@/components/App/Default')),
    'appComponents'
  )
const Search = r =>
  require.ensure(
    [],
    () => r(require('@/components/App/Search')),
    'appComponents'
  )
const Templates = r =>
  require.ensure(
    [],
    () => r(require('@/components/App/Templates')),
    'appComponents'
  )
const Lists = r =>
  require.ensure(
    [],
    () => r(require('@/components/App/Lists')),
    'appComponents'
  )
const Outreach = r =>
  require.ensure(
    [],
    () => r(require('@/components/App/Outreach')),
    'appComponents'
  )

import { Message } from 'element-ui'

Vue.use(Router)

export const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '*',
      name: '404',
      meta: { title: `Page not found` },
      component: Error404
    },
    {
      path: '/help',
      name: 'Help',
      meta: { title: `Help` },
      component: Help
    },
    {
      path: '/product',
      name: 'Product',
      meta: { title: `Product` },
      component: Product
    },
    {
      path: '/services',
      name: 'Services',
      meta: { title: `Services` },
      component: Services
    },
    {
      path: '/team',
      name: 'Team',
      component: Team
    },
    {
      path: '/pricing',
      name: 'Pricing',
      meta: { title: `Pricing` },
      component: Pricing
    },
    {
      path: '/blog',
      name: 'Blog',
      meta: { title: `Blog` },
      component: Blog
    },
    {
      path: '/login',
      name: 'Login',
      meta: { title: `Login` },
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      meta: { title: `Register` },
      component: Register
    },
    {
      path: '/trial',
      name: 'FreeTrial',
      meta: { title: `Free trial` },
      component: FreeTrial
    },
    {
      path: '/viewlist/:id',
      name: 'SharedList',
      meta: { title: `View shared list` },
      component: SharedList
    },
    {
      path: '/app',
      component: MainApp,
      beforeEnter (from, to, next) {
        if (store.getters.getUserStatus.loggedIn) {
          next()
        } else {
          Message({
            message: `You can't access the app because you're not logged in`,
            type: 'error'
          })
          next({ name: 'Login' })
        }
      },
      children: [
        {
          path: '/account',
          component: AccountSettings,
          beforeEnter (from, to, next) {
            if (store.getters.getUserStatus.loggedIn) {
              next()
            } else {
              Message({
                message: `You can't access your profile because you're not logged in. Please log in again`,
                type: 'error'
              })
              next({ name: 'Login' })
            }
          },
          children: [
            {
              path: '',
              name: 'ProfileSection',
              meta: { title: `Edit profile` },
              component: ProfileSection
            },
            {
              path: 'plan',
              name: 'PlanSection',
              meta: { title: `Manage plan` },
              component: PlanSection
            },
            {
              path: 'team',
              name: 'TeamSection',
              meta: { title: `Manage team` },
              component: TeamSection
            },
            {
              path: 'integration',
              name: 'IntegrationSection',
              meta: { title: `Integration` },
              component: IntegrationSection
            }
          ]
        },
        {
          path: '',
          name: 'AppDefault',
          meta: { title: `Explore saphire` },
          component: Default
        },
        {
          path: 'search',
          name: 'AppSearch',
          meta: { title: `Search influencers` },
          component: Search
        },
        {
          path: 'templates',
          name: 'AppTemplates',
          meta: { title: `Manage templates` },
          component: Templates
        },
        {
          path: 'lists',
          name: 'AppLists',
          meta: { title: `Manage lists` },
          component: Lists
        },
        {
          path: 'list/:id',
          name: 'ListView',
          meta: { title: `View list` },
          component: ListView
        },
        {
          path: 'outreach',
          name: 'AppOutreach',
          meta: { title: `Outreach` },
          component: Outreach
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  // Change title based on meta.title property
  if (to.meta.title) {
    document.title = `saphire | ${to.meta.title}`
  } else {
    document.title = `saphire`
  }
  // Checking if inside or outside app and assigning the result to global store variable
  if (to.matched.length > 0) {
    to.matched[0].path === '/app'
      ? store.commit('setAppState', true)
      : store.commit('setAppState', false)
  }
  next()
})

export default router

0 个答案:

没有答案