在Heroku部署对接Django API的Vue.js应用时遇vue-cli-service未找到错误

Let's break down what's happening here and how to fix this issue clearly:

The Root Cause #

Your current start script runs npm run serve, which uses vue-cli-service serve — this is a development-only server meant for local testing. Heroku defaults to production mode, where it doesn't install devDependencies (and @vue/cli-service is typically listed in devDependencies). That's exactly why you're seeing the "not found" error. Plus, using the dev server in production is not recommended for performance and security reasons.

Step-by-Step Solution #

1. Install a Production-Grade Static Server
   We'll use serve to host your optimized built static files. Install it as a production dependency:

   npm install --save serve
   

2. Update Your package.json Scripts
   Replace your existing scripts with these. We'll switch the start command to serve the built dist folder, and add a heroku-postbuild command to automatically build your app during deployment:

   "scripts": {
     "start": "serve -s dist",
     "build": "vue-cli-service build",
     "dev": "vue-cli-service serve", // Keep this for local development work
     "lint": "vue-cli-service lint",
     "heroku-postbuild": "npm run build"
   }
   

3. Ensure Heroku Installs Dev Dependencies Temporarily
   Since vue-cli-service is required to run npm run build, we need Heroku to install dev dependencies during the build process. You can do this by setting an environment variable on Heroku:

   • Go to your Heroku app dashboard → Settings → Config Vars
   • Add a new variable: NPM_CONFIG_PRODUCTION with the value false

   Alternatively, you can add this directly to your package.json (though the environment variable is more flexible for future changes):

   "config": {
     "production": false
   }
   

4. Confirm Your .gitignore Setup
   You already removed dist from .gitignore, which is correct — we don't want to commit pre-built files, but Heroku will generate the dist folder automatically during the postbuild step.

Why This Works #

• The heroku-postbuild script tells Heroku to run npm run build after installing dependencies, which generates optimized static files in the dist folder.
• The start script uses serve -s dist to host those static files with a lightweight, production-ready server.
• Setting NPM_CONFIG_PRODUCTION=false ensures Heroku installs all dependencies (including dev ones) so vue-cli-service is available for the build step.

Once you make these changes, commit them and push to Heroku — your app should deploy and run without the "vue-cli-service not found" error.

内容的提问来源于stack exchange，提问作者Tu Le Thanh