vue build用nginx指定路径,有跳板机nginx导致图片没有取nginx的配置地址

21 篇文章 0 订阅
4 篇文章 0 订阅

nginx配置如下:

 location /web/asset/wap/ {
        try_files $uri $uri/ /index.html =404;#这样配置
        #alias /data/test/project/front/asset/wap/;
        root /data/test/project/front/asset/wap/static/;
        gzip on;

        gzip_types text/plain application/x-javascript text/css text/javascript image/gif image/png image/jpg image/*;

}

我们访问的路径如下:

https://www.baidu.com/web/asset/wap/

这样如果用vue默认的build方式的话,图片取的路径会是https://www.baidu.com/static/img/1.png,因为全部都走的nginx,所以根本找不到https://www.baidu.com/static/这个路径,图片就更不用说了,如果是这样的话,需要修改config/index.js里面build底下assetsPublicPath对应的值改成/web/asset/wap/这样,就会指向/web/asset/wap/static/img/money.f839f6b.png.

图示如下:第一张图片是配置webpack,第二张图片是打包后部署到线上图片的路径,这样就可以不用非得线上指定端口了,另外,如果大图片的话建议放到static文件夹底下,这个文件夹打包的时候会拷贝到dist底下



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值