路由的 base 和webpack的publicPath(vite的base)区别

1. webpack中的output选项有两个重要配置: pathpublicPath

  • output.path 打包输出的目录,必须为一个绝对路径

    eg:

    output: {
     path: path.resolve(__dirname, '../dist'),
    }
    

    打包文件放置在dist目录下, _dirname 为当前文件在电脑中的绝对路径名,/a/b/dist, /a/b/就是 _dirname,path.resolve()通过这两个参数就能指定打包后dist文件放在项目的哪个位置。

  • publicPath:所有静态资源的一个基础路径,服务器从哪个目录开始寻找资源(js,css,image)。publicPath对于打包路径不会有任何影响,影响的是服务器寻找静态资源包。

    eg:

    output: {
        publicPath: '/my-app/'
    }
    

    默认为“/”,即index.html以及其他静态资源包直接在nginx/html的目录下。如果规定路径为“/my-app”,则从nginx/html/my-app/的目录下开始解析。

    所以publicPath为线上部署的路径,需要和运维商量好,运维将静态资源包需要放置在这里面,项目才能找到才能启动。

2. 路由的base

应用的基路径。
例如,如果整个单页应用部署 在 /app/ 下, base 就应该设为 /app/。
需要和线上服务的路径(webpack的publicPath等)一致,因为切换路由时,找页面组件资源时,是从该静态资源文件夹中找。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值