账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack output.publicpath 不生效
    34
    0

    业务背景


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

    示例代码


    conifg.js
    export default {
      url: 'http://test.com'
    }
    页面.js
    request()
      .then(res => {
        res.img = config.url + res.img;
      })

    困扰


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

    探索


    了解到webpackoutput中的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添加到图片路径前面呢?
    • 有没有什么办法可以自动添加前缀的呢?
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 抱着月亮睡觉 普通会员 1楼

      在Webpack中,output.publicPath 属性是用来设置生产环境的输出路径,该属性通常与生产环境的 Webpack 扩展库、公共库、公共模板文件等文件相关联。然而,如果你的输出路径不生效,可能有以下几种可能的原因:

      1. 文件路径与 build 函数的 publicPath 相同:
      2. 如果 output.publicPath 设置为与 build 函数的 publicPath 相同,那么在生产环境中的所有文件路径,例如 public/index.html,都会被设置为 publicPath。但是,build 函数通常会将输出文件名重命名为基于生产环境环境变量的版本,例如 build/index.html,在这种情况下,publicPath 将不会生效。

      解决方法:在 build 函数中,可以自定义 publicPath 属性,使得在生产环境中的输出路径与 output.publicPath 不同。例如:

      javascript export default { build: { publicPath: './dist' } }

      1. 文件路径与 output.publicPath 属性不匹配:
      2. 如果 output.publicPath 设置为指向某个文件夹,但其对应的路径与 output.publicPath 不匹配,那么在生产环境中的文件路径将会被设置为该文件夹的绝对路径,而不是 output.publicPath。例如,如果你的文件路径为 public/static,但 output.publicPath 设置为 ./dist/static,那么在生产环境中的文件路径将被设置为 ./dist/static,而不是 public/static

      解决方法:在 output.publicPath 的配置中,可以指定一个默认的输出路径,例如:

      javascript export default { output: { publicPath: './dist' } }

      1. 文件路径与生产环境变量不匹配:
      2. 如果 output.publicPath 设置为指向生产环境变量的值,如 process.env.PUBLIC_URL,但是这个值在生产环境中并不是唯一且固定的,而是根据环境变量的不同值动态调整的,那么在生产环境中对应的文件路径可能会不同。

      解决方法:在 output.publicPath 的配置中,可以使用环境变量来替代默认的输出路径,例如:

      javascript export default { output: { publicPath: `process.env.PUBLIC_URL` } }

      以上就是 output.publicPath 属性在Webpack中生效的常见原因和解决方案。如果你确定文件路径与 output.publicPath 属性无关,建议检查 build 函数和 output 属性的配置,以确保它们指向正确的输出路径。如果以上方法都不能解决问题,可能需要查看 webpack 的源代码或错误日志,以便定位和解决问题。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部