Vue CLI+Webpack环境下实现<object>标签data属性路径编译需求

Hey there, I’ve dealt with this exact problem while working with Vue CLI and Webpack—let’s break down why it happens and how to fix it quickly.

Why the data Attribute Isn’t Being Compiled #

By default, Vue’s vue-loader (which Webpack uses under the hood in Vue CLI) only automatically processes specific attributes on certain tags for asset path resolution—like src on <img>, <video>, etc. The data attribute on <object> isn’t in that default list, so Webpack ignores it.

Solution 1: Manual require() for Individual Assets #

If you only need this for a few <object> tags, the quickest fix is to use Vue’s dynamic binding with require() to tell Webpack to process the path:

<object type="image/svg+xml" :data="require('../path/to/file.svg')"></object>

The colon (:) before data makes it a dynamic binding, and require() triggers Webpack’s asset resolution just like it does for <img src="...">.

Solution 2: Configure vue-loader to Process data Globally #

If you want all <object> tags’ data attributes to be handled automatically (just like <img>), you can update your Vue CLI config to add data to vue-loader’s asset processing list.

For Vue CLI 3+ (using vue.config.js):

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // Extend the default transformAssetUrls to include <object> -> data
        options.transformAssetUrls = {
          ...options.transformAssetUrls,
          object: 'data'
        }
        return options
      })
  }
}

For older Vue CLI 2 projects, you’ll find the vue-loader config in build/webpack.base.conf.js—look for the vue-loader entry and modify the transformAssetUrls option there the same way.

Once you save this config and restart your dev server, your <object data="../path/to/file.svg"> tags will have their paths compiled just like <img> tags do!

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