<!-- 正常加載 -->
<v-img :src="require('../../assets/logo.png')" />
<!-- 無法加載 -->
<v-img src="../../assets/logo.png" />
<!-- 正常加載 -->
<img src="../../assets/logo.png" />

module.exports = {
 chainWebpack: config => {
  config.module
   .rule('vue')
   .use('vue-loader')
   .loader('vue-loader')
   .tap(options => {
    return {
     ...options,
     //修復靜態(tài)資源引用的問題 vue cli 2 => vue cli 3 升級之后配置項由 transformToRequire 改為 transformAssetUrls
     transformAssetUrls: {
      video: ['src', 'poster'],
      source: 'src',
      img: 'src',
      image: 'xlink:href',
      // 在這里添加需要使用靜態(tài)資源的自定義元素
      'a-avatar': 'src',
     },
    }
   })
 },
}

// vuetify 框架的 src 標簽也需要自動轉換為 require
'v-img': 'src'

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap

module.exports = {
 loaders: utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: isProduction,
 }),
 cssSourceMap: sourceMapEnabled,
 cacheBusting: config.dev.cacheBusting,
 transformToRequire: {
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: 'xlink:href',
  'v-img': 'src',
 },
}