井
  • 发布:2022-08-17 21:30
  • 更新:2024-01-10 09:30
  • 阅读:3690

【报Bug】vite+vue3+cli打包到H5,配置publicPath为cdn地址无效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10 19044.1889

浏览器平台: Chrome

浏览器版本: Edge 104.0.1293.54

项目创建方式: CLI

CLI版本号: 3.0.0-alpha-3041820220630001

示例代码:
// manifest.json  
"h5" : {  
"publicPath" : "//cdn1.xxxx.com/"  
}

操作步骤:

vite+vue3+cli打包到H5,配置publicPath为cdn地址无效

预期结果:

vite+vue3+cli打包到H5,配置publicPath为cdn地址有效果

实际结果:

vite+vue3+cli打包到H5,配置publicPath为cdn地址无效

bug描述:

vite+vue3+cli打包到H5,配置publicPath为cdn地址无效

2022-08-17 21:30 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

vue3 复现该问题,已加分
原因:vue3 未支持该配置
解决办法:通过配置 vite.config.js -> base 解决

import { defineConfig } from 'vite'  
import uni from '@dcloudio/vite-plugin-uni'  
// https://vitejs.dev/config/  
export default defineConfig({  
  base: 'http://www.test-cdn.com/h5/',  
  plugins: [  
    uni(),  
  ],  
})
  • (作者)

    这个我试过了,不行的。会自动在路由前面加上cdn的地址,导致打不开页面。在manifest.h5.rouer.base配置也是一样的。


    比如:我本机地址是http://localhost:3000

    配置vite.config.js中的base为http://www.test-cdn.com/h5/后,我再进首页,会自动重定向到http://localhost:3000http://www.test-cdn.com/h5/,这样的地址形式,导致打不开页面

    2022-08-18 15:13

  • (作者)

    麻烦再看一下,谢谢啦,这应该是个bug吧。vite配置base为cdn地址后,浏览器url地址的路由前缀会自动添加上cdn的地址。

    2022-08-18 15:25

  • DCloud_UNI_WZF

    回复 : 这边测试没有问题,检查代码或提供下测试工程

    2022-08-18 16:07

  • (作者)

    回复 DCloud_UNI_WZF: 请查看这个demo的代码 https://gitee.com/wtto00/uniapp-base-config-debug

    我又测试了下,路由模式是hash就没有我描述的问题,但是改成history就会出现我描述的问题。麻烦看一下

    2022-08-18 19:26

  • DCloud_UNI_WZF

    回复 : 问题复现了,你的需求是要配置公共基础路径还是处理静态资源(例如图片)的cdn

    2022-08-19 13:33

  • (作者)

    回复 DCloud_UNI_WZF: 我的需求是:打包后的index.html使用nginx访问,主要是配置history模式的try_files。其他所有的资源,包括js,css,图片等都放在cdn上面。现在主要的问题是路由前缀和资源前缀相混淆了。标准的vite+vue是可以这样做到的,base配置资源前缀,vue-router也可以配置路由前缀。

    2022-08-19 16:14

  • DCloud_UNI_WZF

    回复 : 好,这边排查一下

    2022-08-19 16:34

  • (作者)

    回复 DCloud_UNI_WZF: 不用啦,我发现是我少配置一个。现在的情况是:vite.config.base配置的是资源前缀,manifest.h5.rouer.base配置的是路由前缀。我只配置了vite.config.base,没有配置manifest.h5.rouer.base的话,默认是使用vite.config.base配置的值,所以就出现了我描述的问题。我现在把这两个配置全部配置好正确的值,我惊讶的发现是OK的,没有问题。抱歉,打扰了。

    2022-08-19 17:28

  • DCloud_UNI_WZF

    回复 : 1

    2022-08-19 18:55

  • 我不是漫游

    回复 DCloud_UNI_WZF: 这玩意不修吗,开发者很容易就会遇到呀

    2022-10-17 21:12

  • 我不是漫游

    至少官方配置publicPath 写清楚呀

    2022-10-17 21:13

  • Edmin

    原因:vue3 未支持该配置。还会支持么?还是vue3就在vite.config.js里面配置来解决???可以说清楚明白么???这都23年了

    2023-04-17 17:45

  • DCloud_UNI_WZF

    回复 Edmin: 文档已更新,针对配置不符预期问题,如果上述方案无法解决,提供下你的测试工程

    2023-04-17 18:14

我不是漫游

我不是漫游 - yangxin

base 应该是配置访问路径的基本前缀。publicPath 是静态资源的cdn地址,不管如何搭配都配置不成功

我不是漫游

我不是漫游 - yangxin

"h5" : {
"publicPath" : "//cdn1.xxxx.com/"
}
应该是这样配置 cdn资源就能打包成功,但是index.html中静态资源没有带这个cdn地址

  • DCloud_UNI_WZF

    测试没有问题,请检查代码或参考提交Bug模板提供详细信息及测试工程

    2022-10-24 09:07

码到80岁

码到80岁

类似问题求教,vue2, cli项目,打包成wgt,出现相同问题。默认情况下,打包wgt后资源引用路径为/assets/xx.png,运行时实际地址为file:///assets/xxx.png。希望变为相对地址。在vue.config.js中设置publicPath不生效,在manifest.json中,H5和app-plus中设置publicPath也未生效。

要回复问题请先登录注册