vue怎么设置publicpath呢？不知道的小伙伴来看看小编今天的分享吧!
1、每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录
2、部署的时候，是部署在服务器的一个/test文件夹下
打包后的文件目录：
12345├─dist├─css├─img└─jsindex.html
一、不设置publicPath时，部署后请求路径：
12345//vue.config.jsmodule.exports={//publicPath:'',}
二、设置为/时，部署后请求路径：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPEhtml><htmllang=en><head><title>test</title><linkhref=/css/app.0b79487b.cssrel=preloadas=style><linkhref=/js/app.ba2d9b8a.jsrel=preloadas=script><linkhref=/js/chunk-vendors.e7ac9ff2.jsrel=preloadas=script><linkhref=/css/app.0b79487b.cssrel=stylesheet></head><body><divid=app></div><scriptsrc=/js/chunk-vendors.e7ac9ff2.js></script><scriptsrc=/js/app.ba2d9b8a.js></script></body></html>
|
1
2
3
4
5
//vue.config.jsmodule.exports={publicPath:'/',}|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPEhtml><htmllang=en><head><title>test</title><linkhref=/css/app.0b79487b.cssrel=preloadas=style><linkhref=/js/app.ba2d9b8a.jsrel=preloadas=script><linkhref=/js/chunk-vendors.e7ac9ff2.jsrel=preloadas=script><linkhref=/css/app.0b79487b.cssrel=stylesheet></head><body><divid=app></div><scriptsrc=/js/chunk-vendors.e7ac9ff2.js></script><scriptsrc=/js/app.ba2d9b8a.js></script></body></html>
|
三、设置为./时，部署后请求路径：
1
2
3
4
5
//vue.config.jsmodule.exports={publicPath:'./',}|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPEhtml><htmllang=en><head><title>test</title><linkhref=css/app.0b79487b.cssrel=preloadas=style><linkhref=js/app.8569d42d.jsrel=preloadas=script><linkhref=js/chunk-vendors.e7ac9ff2.jsrel=preloadas=script><linkhref=css/app.0b79487b.cssrel=stylesheet></head><body><divid=app></div><scriptsrc=js/chunk-vendors.e7ac9ff2.js></script><scriptsrc=js/app.8569d42d.js></script></body></html>
|
四、设置为static时，部署后请求路径：
1
2
3
4
5
//vue.config.jsmodule.exports={publicPath:'static',}|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPEhtml><htmllang=en><head><title>test</title><linkhref=static/css/app.0b79487b.cssrel=preloadas=style><linkhref=static/js/app.d0717808.jsrel=preloadas=script><linkhref=static/js/chunk-vendors.e7ac9ff2.jsrel=preloadas=script><linkhref=static/css/app.0b79487b.cssrel=stylesheet></head><body><divid=app></div><scriptsrc=static/js/chunk-vendors.e7ac9ff2.js></script><scriptsrc=static/js/app.d0717808.js></script></body></html>
|
五、设置为./static时，部署后请求路径：
1
2
3
4
5
//vue.config.jsmodule.exports={publicPath:'./static',}|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPEhtml><htmllang=en><head><title>test</title><linkhref=static/css/app.0b79487b.cssrel=preloadas=style><linkhref=static/js/app.d0717808.jsrel=preloadas=script><linkhref=static/js/chunk-vendors.e7ac9ff2.jsrel=preloadas=script><linkhref=static/css/app.0b79487b.cssrel=stylesheet></head><body><divid=app></div><scriptsrc=static/js/chunk-vendors.e7ac9ff2.js></script><scriptsrc=static/js/app.d0717808.js></script></body></html>
|
六、设置为../static时，部署后请求路径：
1
2
3
4
5
//vue.config.jsmodule.exports={publicPath:'../static',}|
123456789101112131415<!DOCTYPEhtml><htmllang=en><head><title>test</title><linkhref=../static/css/app.0b79487b.cssrel=preloadas=style><linkhref=../static/js/app.695b7ccc.jsrel=preloadas=script><linkhref=../static/js/chunk-vendors.e7ac9ff2.jsrel=preloadas=script><linkhref=../static/css/app.0b79487b.cssrel=stylesheet></head><body><divid=app></div><scriptsrc=../static/js/chunk-vendors.e7ac9ff2.js></script><scriptsrc=../static/js/app.695b7ccc.js></script></body></html>
七、设置为../时，部署后请求路径：
1
2
3
4
5
//vue.config.jsmodule.exports={publicPath:'../',}|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPEhtml><htmllang=en><head><title>test</title><linkhref=../css/app.0b79487b.cssrel=preloadas=style><linkhref=../js/app.67ace555.jsrel=preloadas=script><linkhref=../js/chunk-vendors.e7ac9ff2.jsrel=preloadas=script><linkhref=../css/app.0b79487b.cssrel=stylesheet></head><body><divid=app></div><scriptsrc=../js/chunk-vendors.e7ac9ff2.js></script><scriptsrc=../js/app.67ace555.js></script></body></html>
|
以上就是小编今天的分享了，希望可以帮助到大家。
标签：
