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

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底下

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

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

你可能感兴趣的:(JS,vue,打包,webpack图片路径错误)