webpack output.publicpath 不生效

Question

业务背景

---

• 使用mpvue开发小程序
• 测试环境和正式环境的域名是不一样的,所以服务器返回的图片全部是相对路径
• 现在的处理方式是
• 配置一个全局的域名前缀
• 在每次请求接口获取到数据后,给图片加上这个全局前缀
• 更换正式环境后,只需要替换全局域名前缀就行了

示例代码

---

conifg.js

export default {
  url: 'http://test.com'
}

页面.js

request()
  .then(res => {
    res.img = config.url + res.img;
  })

困扰

---

每次请求的时候都要处理前缀
感觉特别的麻烦

探索

---

了解到webpack的output中的publicpath可以批量给静态资源添加前缀,但是试了下没反映

webpack.config.js

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: 'http://test.com/api'
  },

页面.wxml

<img src="uploads/2010-06-19/3.png">

渲染结果

<image class="_img data-v-04ee3f7a" src="uploads/2010-06-19/3.png"></image>

好像打包的时候并没有进行处理啊.

问题

• 为什么webpack打包时,没有把publicpath添加到图片路径前面呢?
• 有没有什么办法可以自动添加前缀的呢?

Answer 1

https://webpack.js.org/config... 官网说的很清楚啊

Answer 2

加publicPath是为了区分服务端与客户端的那个路径，区分要处理的文件

在浏览器中可以更好的查看