背景

最近在做跨平台框架的试点，选择了uni-app，并打算先在h5上开始试点。

由于uni-app提供的基于vue-cli的脚手架与我们内部的脚手架稍有些不同，直接使用稍微有点学习成本，所以fork了一下，稍作修改，做了一个内部版本的脚手架（主要就是将publicPath从manifest.json中拿出来，实现动态配置），目的就是让其用起来和我们自己的脚手架差不多。

问题

修改完脚手架，在本地测试时，发现了一个问题，当时使用这样一段代码：

<template>
  <view class="content">
    <image class="logo" src="../../static/logo.png"></image>
    ...
  </view>
</template>

在配置好publicPath后，将dist/build/h5的结果上传到我们的静态服务器上后，发现图片显示不出来。在控制台检查一下代码，发现此处的img标签是这样的：

也就是说配置的publicPath并未生效。

寻找解决办法

开始怀疑是不是自己漏掉了什么配置，在uni-app找了关于image组件的使用方法，里面看起来并没有什么特殊的说明。好吧，Google一下，发现网上有一些解决方案，需要把代码改成下面这样：

<template>
  <view class="content">
    <image class="logo" :src="require('../../static/logo.png')"></image>
    ...
  </view>
</template>

试了一下，确实，图片回来了:

但是这样解决还是略有些简陋，改脚手架不能止步于此。于是继续寻找解决办法

思路

迅速的捋一下思路，出现这个问题的原因是，.vue文件在编译阶段并没有为这个image组件的src属性的值自动加上require，从而无法被file-loader或url-loader来正确的处理。看来问题的关键就出在编译.vue文件这里。

所以去看了一下vue-loader的官方文档，vue-loader的文档很明显的有专门的一节来介绍这个功能：

大概意思就是说有一个transformAssetUrls的属性可以用来处理这种问题。这个属性的默认值是：

{
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

也就是说，vue-loader默认会处理比如img标签的src属性，如果src的值为相对路径，就会将其替换为require(...)调用。去看一下uni-app的脚手架是怎么配vue-loader便知。直接去node_modules下看源码，找到配置vue-loader的地方在@dcloudio/vue-cli-plugin-uni/lib/h5/index里：

// @dcloudio/vue-cli-plugin-uni/lib/h5/index.js#L113
webpackConfig.module
  .rule('vue')
  .test([/\.vue$/, /\.nvue$/])
  .use('vue-loader')
  .tap(options => Object.assign(options, {
      compiler: getPlatformCompiler(),
      compilerOptions: require('./compiler-options'),
      cacheDirectory: false,
      cacheIdentifier: false
  }))
  .end()
    // ...

在.tap中发现，uni-app的脚手架并没有配置transformAssetUrls这个属性，可能只是走了默认的配置。直接在本地修改一下试试吧，直接修改node_modules/@dcloudio/vue-cli-plugin-uni/lib/h5/index，试着为image增加一个src属性:

// @dcloudio/vue-cli-plugin-uni/lib/h5/index.js#L113
webpackConfig.module
  .rule('vue')
  .test([/\.vue$/, /\.nvue$/])
  .use('vue-loader')
  .tap(options => Object.assign(options, {
      compiler: getPlatformCompiler(),
      compilerOptions: require('./compiler-options'),
      cacheDirectory: false,
      cacheIdentifier: false,
      // 新增的这里
      transformAssetUrls: {
        'image': ['xlink:href', 'href', 'src']
      }
  }))
  .end()
    // ...

发现并没有生效，仔细察看build后的源码，发现实际上image组件最终会被处理成以渲染函数的形式来创建的组件:

// ...
return createElement("v-uni-image", {
  staticClass: "logo",
  attrs: {
    src: '../../static/logo.png'
  }
})            
// ...

可以看到，组件名会被修改为v-uni-image，所以上面的配置才没有生效。

解决

继续改成这样：

// @dcloudio/vue-cli-plugin-uni/lib/h5/index.js#L113
webpackConfig.module
  .rule('vue')
  .test([/\.vue$/, /\.nvue$/])
  .use('vue-loader')
  .tap(options => Object.assign(options, {
      compiler: getPlatformCompiler(),
      compilerOptions: require('./compiler-options'),
      cacheDirectory: false,
      cacheIdentifier: false,
      // 新增的这里
      transformAssetUrls: { 
        'v-uni-image': 'src'
      }
  }))
  .end()
  // ...

重新build，确实生效了，看一下生成的代码大概是这样的:

return createElement("v-uni-image", { 
  staticClass: "logo", 
  attrs: { 
    src: require(// ... ) 
  }
})

关于`transformAssetUrls`

趁热打铁，又看一下vue-loader的源码，看看到底是如何处理transformAssetUrls这个属性的，一些关键代码：

// 详见 https://github.com/vuejs/vue-loader/blob/master/lib/loaders/templateLoader.js#L32

  const { compileTemplate } = require('@vue/component-compiler-utils')
// ...

// for vue-component-compiler
// 最终将传递给模板编译器的所有选项
  const finalOptions = {
    source,
    filename: this.resourcePath,
    compiler,
    compilerOptions,
    // allow customizing behavior of vue-template-es2015-compiler
    transpileOptions: options.transpileOptions,
    transformAssetUrls: options.transformAssetUrls || true,  // 注意这里!!!
    isProduction,
    isFunctional,
    optimizeSSR: isServer && options.optimizeSSR !== false,
    prettify: options.prettify
  }

  const compiled = compileTemplate(finalOptions)  // 将所有的选项传递给compileTemplate模板编译器
  // ...

追下去：

  // 详见 https://github.com/vuejs/component-compiler-utils/blob/master/lib/compileTemplate.ts#L113
  import assetUrlsModule from './templateCompilerModules/assetUrl'
  // ...
  let finalCompilerOptions = finalOptions
  
  if (transformAssetUrls) { // 如果传入了自定义的transformAssetUrls，将其与默认的合并
    const builtInModules = [
      transformAssetUrls === true
        ? assetUrlsModule()
        : assetUrlsModule(transformAssetUrls),
      srcsetModule()    
    ]
    finalCompilerOptions = Object.assign({}, compilerOptions, {
      modules: [...builtInModules, ...(compilerOptions.modules || [])] // 是不是很眼熟
    })
  }

  const { render, staticRenderFns, tips, errors } = compile(
    source,
    finalCompilerOptions
  )

继续追：

// 详见 https://github.com/vuejs/component-compiler-utils/blob/master/lib/templateCompilerModules/assetUrl.ts

// 熟悉的面孔
const defaultOptions: AssetURLOptions = {
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

// 原来是通过返回一个postTransformNode来处理上面这些标签的
export default (userOptions?: AssetURLOptions) => {
  const options = userOptions
    ? Object.assign({}, defaultOptions, userOptions)
    : defaultOptions

  return {
    postTransformNode: (node: ASTNode) => {
      transform(node, options)
    }
  }
}

function transform(node: ASTNode, options: AssetURLOptions) {
  for (const tag in options) {
    // ...
    attributes.forEach(item => node.attrs.some(attr => rewrite(attr, item)))
  }
}

function rewrite(attr: Attr, name: string) {
  if (attr.name === name) {
    // ... 大概是这个意思
    attr.value = `require(${attr.value})`
  }
  return false
}

可以看到，原来transformAssetUrls里面的选项会直接生成一个叫的postTransformNode的钩子，他的作用就是用来处理模板template里面的每一个元素element，生成单独的语法树节点ASTNode，并在ASTNode被进一步处理之后要执行的。与postTransformNode对应的还有preTransformNode钩子，顾名思义，就是在生成的ASTNode即将被进一步处理之前要执行的钩子。这两类钩子可以放到一个 { modules: [ 钩子 ] } 的对象中，一并传入给最终的模板编译器。

而在uni-app的自定义编译器的编译器选项@dcloudio/vue-cli-plugin-uni/lib/h5/compiler-options.js`中，也可以看到类似的代码：

// @dcloudio/vue-cli-plugin-uni/lib/h5/compiler-options.js#L113
module.exports = {
  isUnaryTag,
  preserveWhitespace: false,
  modules: [require('../format-text'), {
    preTransformNode (el, {
      warn
    }) {
        // ...
    },
    postTransformNode (el, {
      warn,
      filterModules
    }) {
        // ...
    }

uni-app自有组件的v-uni-前缀就是通过这种方式添加的。所以，上面的遇到问题也可以直接在这里比较暴力的方式处理:

// @dcloudio/vue-cli-plugin-uni/lib/h5/compiler-options.js#L113

// 将vue自带的处理方法引进来
const assetUrlsModule = require('@vue/component-compiler-utils/dist/templateCompilerModules/assetUrl').default
// 生成标签处理的钩子
const builtInModules = assetUrlsModule({ 'v-uni-image': 'src' })

module.exports = {
  isUnaryTag,
  preserveWhitespace: false,
  modules: [require('../format-text'), {
    ...builtInModules,
  }, {
    preTransformNode (el, {
      warn
    }) {
        // ...
    },
    postTransformNode (el, {
      warn,
      filterModules
    }) {
        // ...
    }

更多关于modules的信息可参考: 编译器模块的数组

直接在项目中的解决办法

如果想直接使用官方的脚手架来解决这个问题，就可以在vue.config.js中加入如下代码来解决：

module.exports = {
  chainWebpack(webpackConfig) {
    webpackConfig.module
    .rule('vue')
    .test([/\.vue$/, /\.nvue$/])
    .use('vue-loader')
    .tap(options => Object.assign(options, {
      transformAssetUrls: {
        'v-uni-image': 'src'
      }
    }))
    .end()
  },
  
  configureWebpack (config) {
    // ...blablabla  
  },
}

嗯，不是办法的办法。

你如果有更好的解决方法欢迎评论区留言，讨论。

关注我们