使用vue-cli+webpack模板创建项目编译报错：94% asset optimization失败

Hey there, let's work through that frustrating asset optimization error you're hitting at the 94% mark during compilation. Here are actionable steps to diagnose and fix the issue:

1. Get the Full Error Details First #

Right now you only know there's 1 error, but the critical info is hidden. To see exactly what's breaking:

• Run your dev command again with the --display-error-details flag to force webpack to show verbose error logs. Update your dev script in package.json temporarily:

  "dev": "webpack-dev-server --debug --inline --progress --display-error-details --config build/webpack.dev.conf.js"
  

• Look closely at the terminal output after the ERROR line—this will tell you which file, resource, or configuration is causing the problem (e.g., a missing image, invalid file path, or misconfigured loader).

2. Check Static Resource References #

Asset optimization errors often stem from issues with images, fonts, or other static assets:

• Verify all your asset paths (in components, stylesheets, or templates) point to existing files. Typos in relative paths (like ../assets/img/logo.png instead of ../assets/images/logo.png) are super common.
• Double-check your webpack loader configs (usually in build/webpack.base.conf.js) for url-loader/file-loader. Make sure the limit value is set correctly—if an asset exceeds this limit, webpack tries to emit it as a file, and if the output path is misconfigured, it can fail.

3. Clear Caches and Rebuild #

Cached data can cause weird, unexplained compilation issues:

• Stop the dev server, delete the node_modules/.cache directory (webpack's cache folder), and restart the server.
• If you have a dist directory from previous builds, delete it too before re-running npm run dev.

4. Verify Dependency Compatibility #

Mismatched versions of webpack-related packages can break asset processing:

• Delete your node_modules folder and package-lock.json (or yarn.lock), then run npm install (or yarn) to do a fresh install of dependencies. This ensures all packages play nicely together as defined in your package.json.

5. Audit Webpack Configuration Files #

Take a quick look at your build configs:

• Check build/webpack.dev.conf.js for plugins like CopyWebpackPlugin—if it's configured to copy files that don't exist, this will throw an error during asset optimization.
• Ensure the output section in your webpack config has a valid path and publicPath set, as incorrect values can mess up asset emission.

Once you get the full error details, you can zero in on the exact fix—these steps should help you uncover the root cause quickly.

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