使用vue-cli webpack-simple模板加载视频文件报错求助

Hey, I’ve run into this exact problem before! The error you’re seeing happens because webpack doesn’t know how to handle video files out of the box—you need to add a loader that can process binary assets like MP4s. Here’s how to fix it step by step:

1. Install the Required Loader #

First, you’ll need file-loader (it works great for handling media files like videos, audio, images, etc.). Install it via npm or yarn:

npm install file-loader --save-dev
# OR
yarn add file-loader -D

2. Update Your Webpack Configuration #

Open your webpack.config.js file and add a new rule to the module.rules array to handle video files. Here’s what your updated rules should look like:

module.exports = {
  // ... rest of your existing config
  module: {
    rules: [
      // ... your current rules for .vue, .js, .css files
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[hash:8].[ext]', // Adds a hash for cache busting
          outputPath: 'media' // Optional: puts all media files in a "media" folder in dist
        }
      }
    ]
  }
  // ... rest of your existing config
}

This tells webpack to use file-loader for all common video/audio formats. The loader will copy the video file to your dist folder (with a hash in the filename for caching) and return the correct path to use in your component.

3. Adjust Your Video Tag in Vue #

You have two solid options to reference the video correctly:

• Option 1: Use require() in the template (ideal for relative paths in components):

<video :src="require('./assets/twp-logo-video.mp4')" id="initial-logo" type="video/mp4"></video>

The colon before src makes it a dynamic binding, so Vue will process the require() call and fetch the correct URL webpack generates.

• Option 2: Use the static folder (if you prefer skipping loader processing):
  Create a static folder at your project root, place the video inside it, then reference it like this:

<video src="/static/twp-logo-video.mp4" id="initial-logo" type="video/mp4"></video>

Files in static get copied directly to the dist folder without webpack processing, so this is a quick alternative if you don’t need cache hashing.

4. Restart Your Dev Server #

After making these changes, stop your running dev server and restart it with npm run dev—webpack needs to pick up the new loader configuration to apply the changes.

That should resolve the "Module parse failed" error and let your video load correctly!

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