Ubuntu 17.10下Vue.js项目运行失败求助

Hey Tom, let's work through the errors you're seeing when running npm run dev on your server—since everything works locally, these issues are almost certainly tied to environment differences between your macOS/Windows setup and the server (likely Linux-based, which has key differences like case sensitivity). Here's how to fix each problem step by step:

1. Fix Missing Component Dependencies (@/components/account/Profile etc.) #

These "not found" errors for your account components are most often due to file path case sensitivity or missing files on the server:

• Check file name case: macOS and Windows treat file names as case-insensitive (e.g., Profile.vue and profile.vue are the same), but Linux servers are case-sensitive. Double-check that the actual files on your server match the exact case in your router imports:
  • Ensure src/components/account/Profile.vue exists (not profile.vue)
  • Verify the same for Plan.vue, Team.vue, and Integration.vue
• Confirm files are deployed: Make sure these component files weren't accidentally excluded from your deployment (e.g., via a misconfigured .gitignore, or a deployment script that skipped the account subdirectory)
• Validate Webpack @ alias: Ensure your server's Webpack config has the correct alias mapping for @ to your src directory. In your Webpack base config (usually webpack.base.conf.js), you should have:

  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src')
    }
  }
  

  If this config is missing or incorrect on the server, Webpack won't resolve the @ paths correctly.

2. Fix Missing babel-runtime/helpers/extends Dependency #

This error happens when the babel-runtime package is either missing from your dependencies or not properly configured:

• Install babel-runtime: Run this command on your server to add it as a production dependency:

  npm install babel-runtime --save
  

• Check Babel configuration: Ensure your .babelrc file includes the transform-runtime plugin, which automatically handles imports for Babel helper functions like extends:

  {
    "presets": ["vue-app"],
    "plugins": ["transform-runtime"]
  }
  

3. Clear Cache & Reinstall Dependencies #

Sometimes server issues stem from stale dependencies or cached build files. Try these steps to reset:

• Delete the node_modules folder: rm -rf node_modules
• Remove your lock file: rm package-lock.json (or yarn.lock if using Yarn)
• Reinstall dependencies: npm install
• Run the dev server with cache disabled: npm run dev --no-cache (if using Vue CLI) or manually delete any Webpack cache directories.

After working through these steps, your npm run dev command should resolve the missing dependencies and run as smoothly as it does locally!

内容的提问来源于stack exchange，提问作者Tom coates