UglifyJs构建报错Unexpected token: operator (*)，Heroku部署求助

Hey there, sorry to hear you're hitting this snag—local dev working but Heroku failing is always tricky, but let's walk through the most likely issues and fixes based on what you shared.

First, I notice your Webpack config is incomplete (the scss loader line is cut off) and missing some critical pieces that Heroku needs to build your app properly. Let's break this down step by step:

1. Fix Dependencies That Heroku Might Be Missing #

Heroku defaults to installing only dependencies in your package.json (not devDependencies). If you've been keeping tools like vue-loader, html-webpack-plugin, or sass-loader in devDependencies, Heroku won't have them during the build.

• Move all build-related packages to dependencies (or set NPM_CONFIG_PRODUCTION=false in Heroku config, but this isn't ideal for production).
• Double-check you have vue-template-compiler installed—it's a required peer dependency for vue-loader and often gets overlooked.

2. Complete Your Webpack Configuration #

Your current config is missing entry/output points, full loader chains, and mode settings—all essential for a production build. Here's a corrected, production-ready version tailored to your setup:

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
  // Define your app's entry point
  entry: './src/main.js',
  // Set up output for production
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js', // Content hash helps with browser caching
    clean: true // Cleans the dist folder before each build
  },
  resolve: { 
    alias: { 'vue$': 'vue/dist/vue.js' },
    extensions: ['.vue', '.js', '.json'] // Auto-resolve common file extensions
  }, 
  module: { 
    rules: [ 
      { 
        test: /\.vue$/, 
        loader: 'vue-loader', 
        options: { 
          // Complete the SCSS loader chain (your original was truncated)
          loaders: { 
            scss: 'vue-style-loader!css-loader!sass-loader'
          } 
        } 
      },
      // Add Babel loader if you're using ES6+ features
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-env']
        }
      },
      // Handle standalone SCSS files
      {
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      }
    ] 
  },
  plugins: [
    // Generate HTML file with bundled JS injected
    new HtmlWebpackPlugin({
      template: './public/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
    // Set production environment variables
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
    })
  ],
  // Automatically set mode based on environment
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}

3. Configure Your Package.json for Heroku #

Make sure you have a proper build script and a start script to serve your built app:

{
  "scripts": {
    "build": "webpack --mode production",
    "start": "serve dist" // Use the `serve` package to serve static files; install it via npm install serve --save
  },
  "dependencies": {
    "vue": "^2.6.14",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "css-loader": "^6.7.1",
    "sass-loader": "^12.6.0",
    "vue-style-loader": "^4.1.3",
    "babel-loader": "^8.2.5",
    "@babel/core": "^7.19.0",
    "@babel/preset-env": "^7.19.0",
    "serve": "^14.0.1"
  }
}

4. Check Heroku's Build Logs for Exact Errors #

The biggest help will be seeing what's actually failing on Heroku. Run this command in your terminal to view real-time logs:

heroku logs --tail

Look for lines like Module not found or Command failed with exit code 1—these will point you directly to the issue (e.g., a missing dependency or invalid config line).

Give these steps a try, and if you hit a specific error from the logs, feel free to share it and we can narrow it down further!

内容的提问来源于stack exchange，提问作者Saqib Javed