Node.js+Vue.js作品集Heroku部署出现应用错误，寻求解决方案

Hey there! Let’s figure out why your portfolio runs perfectly locally but throws that frustrating Application Error on Heroku. Local success means your core code is solid—this is almost always a deployment configuration hiccup. Let’s break down the steps to diagnose and fix it:

1. First, Check Heroku’s Logs (Critical!) #

Heroku hides the real error details behind that generic message. To see exactly what’s going wrong, run this command in your terminal:

heroku logs --tail

This streams real-time logs from your Heroku app. Look for lines tagged error or crash—they’ll tell you the root cause (e.g., missing dependencies, wrong port configuration, build failures).

2. Verify Your package.json Scripts #

Heroku relies on your package.json scripts to know how to build and run your app. Here’s what you need to confirm:

• A build script to compile your Vue app into static files:

  "scripts": {
    "build": "vue-cli-service build",
    // ... other scripts
  }
  

• A start script to launch your Node server (if you’re using one to serve static files):

  "scripts": {
    "start": "node server.js",
    // ...
  }
  

  Important: Heroku assigns a dynamic port via the PORT environment variable—never hardcode a port like 3000 in your server code. Use process.env.PORT instead.

3. Fix Your Production Configuration (config/index.js) #

You shared the dev config, but the production (build) section is likely where the issue lies. Make sure these settings are correct:

module.exports = {
  // ... dev config
  build: {
    // Correct path to your compiled static files
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // For Heroku, this should be '/' (not a local path like '/localhost:8080/')
    assetsPublicPath: '/',
    // ... other build settings
  }
}

A wrong assetsPublicPath can break asset loading, causing the app to fail on launch.

4. Ensure You Have a Proper Server File (If Needed) #

If you’re using Node to serve your Vue static files, you need a server.js (or similar) to handle requests. Here’s a minimal working example:

const express = require('express');
const path = require('path');
const app = express();

// Serve static files from the dist folder
app.use(express.static(path.join(__dirname, 'dist')));

// Catch all routes and return the Vue app's index.html (for SPA routing)
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// Use Heroku's assigned port
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Don’t forget to add express to your dependencies with npm install express --save.

5. Check Dependencies and Build Process #

• Dev vs Production Dependencies: Heroku only installs dependencies by default. If tools like vue-cli-service are in devDependencies, move them to dependencies or run:

  heroku config:set NPM_CONFIG_PRODUCTION=false
  

• Auto-Build on Heroku: If you’re not committing the dist folder (best practice), add a postinstall script to trigger the build during deployment:

  "scripts": {
    "postinstall": "npm run build",
    // ... other scripts
  }
  

  This ensures Heroku compiles your Vue app right after installing dependencies.

6. Double-Check .gitignore #

Make sure you’re not ignoring the dist folder if you’re committing it. If you’re using the postinstall method above, keeping dist in .gitignore is fine—but if you’re relying on committing dist, remove it from the file.

Start with checking the logs first—they’ll point you directly to the problem. Once you fix that, your portfolio should deploy smoothly!

内容的提问来源于stack exchange，提问作者Alex Salicki