1、下看一下publicPath字段出现的位置
vue.config.js
![](https://i-blog.csdnimg.cn/blog_migrate/58d5f92b78a400728a8d89cde4f9c425.webp?x-image-process=image/format,png)
webpack.config.js![](https://i-blog.csdnimg.cn/blog_migrate/6a9eb3efe31a62830ab26a509c49acdb.png)
2、官网中的解释(可以忽略)
![](https://i-blog.csdnimg.cn/blog_migrate/5286f64bc2acb620e0ad3b74c052f318.webp?x-image-process=image/format,png)
3、用人话解释publicPath
场景说明:
- 每次打包build完后,都单独生成一个/dist文件夹,且dist中每次都只有相同文件目录
- 部署的时候,是部署在服务器的一个/test文件夹下
- 打包后的文件目录结构
![](https://i-blog.csdnimg.cn/blog_migrate/0420ccfac7446a3234a642f40387db03.png)
一、不设置publicPath时,部署后请求路径:
http://111.222.333.444:8888/css/app.0b79487b.css
1 2 3 4 5 | // vue.config.js module.exports = { // publicPath: '', } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html lang = en > < head > < title >test</ title > < link href=/css/app.0b79487b.css rel = preload as = style > < link href=/js/app.ba2d9b8a.js rel = preload as = script > < link href=/js/chunk-vendors.e7ac9ff2.js rel = preload as = script > < link href=/css/app.0b79487b.css rel = stylesheet > </ head > < body > < div id = app ></ div > < script src=/js/chunk-vendors.e7ac9ff2.js></ script > < script src=/js/app.ba2d9b8a.js></ script > </ body > </ html > |
二、设置为/时,部署后请求路径:
http://111.222.333.444:8888/css/app.0b79487b.css
1 2 3 4 5 | // vue.config.js module.exports = { publicPath: '/' , } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html lang = en > < head > < title >test</ title > < link href=/css/app.0b79487b.css rel = preload as = style > < link href=/js/app.ba2d9b8a.js rel = preload as = script > < link href=/js/chunk-vendors.e7ac9ff2.js rel = preload as = script > < link href=/css/app.0b79487b.css rel = stylesheet > </ head > < body > < div id = app ></ div > < script src=/js/chunk-vendors.e7ac9ff2.js></ script > < script src=/js/app.ba2d9b8a.js></ script > </ body > </ html > |
三、设置为./时,部署后请求路径:
http://111.222.333.444:8888/test/css/app.0b79487b.css
1 2 3 4 5 | // vue.config.js module.exports = { publicPath: './' , } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html lang = en > < head > < title >test</ title > < link href = css /app.0b79487b.css rel = preload as = style > < link href = js /app.8569d42d.js rel = preload as = script > < link href = js /chunk-vendors.e7ac9ff2.js rel = preload as = script > < link href = css /app.0b79487b.css rel = stylesheet > </ head > < body > < div id = app ></ div > < script src = js /chunk-vendors.e7ac9ff2.js></ script > < script src = js /app.8569d42d.js></ script > </ body > </ html > |
四、设置为static时,部署后请求路径:
http://111.222.333.444:8888/test/static/css/app.0b79487b.css
1 2 3 4 5 | // vue.config.js module.exports = { publicPath: 'static' , } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html lang = en > < head > < title >test</ title > < link href = static /css/app.0b79487b.css rel = preload as = style > < link href = static /js/app.d0717808.js rel = preload as = script > < link href = static /js/chunk-vendors.e7ac9ff2.js rel = preload as = script > < link href = static /css/app.0b79487b.css rel = stylesheet > </ head > < body > < div id = app ></ div > < script src = static /js/chunk-vendors.e7ac9ff2.js></ script > < script src = static /js/app.d0717808.js></ script > </ body > </ html > |
五、设置为./static时,部署后请求路径:
http://111.222.333.444:8888/test/static/css/app.0b79487b.css
1 2 3 4 5 | // vue.config.js module.exports = { publicPath: './static' , } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html lang = en > < head > < title >test</ title > < link href = static /css/app.0b79487b.css rel = preload as = style > < link href = static /js/app.d0717808.js rel = preload as = script > < link href = static /js/chunk-vendors.e7ac9ff2.js rel = preload as = script > < link href = static /css/app.0b79487b.css rel = stylesheet > </ head > < body > < div id = app ></ div > < script src = static /js/chunk-vendors.e7ac9ff2.js></ script > < script src = static /js/app.d0717808.js></ script > </ body > </ html > |
六、设置为../static时,部署后请求路径:
http://111.222.333.444:8888/static/css/app.0b79487b.css
1 2 3 4 5 | // vue.config.js module.exports = { publicPath: '../static' , } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html lang = en > < head > < title >test</ title > < link href=../static/css/app.0b79487b.css rel = preload as = style > < link href=../static/js/app.695b7ccc.js rel = preload as = script > < link href=../static/js/chunk-vendors.e7ac9ff2.js rel = preload as = script > < link href=../static/css/app.0b79487b.css rel = stylesheet > </ head > < body > < div id = app ></ div > < script src=../static/js/chunk-vendors.e7ac9ff2.js></ script > < script src=../static/js/app.695b7ccc.js></ script > </ body > </ html > |
七、设置为../时,部署后请求路径:
http://111.222.333.444:8888/css/app.0b79487b.css
1 2 3 4 5 | // vue.config.js module.exports = { publicPath: '../' , } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html lang = en > < head > < title >test</ title > < link href=../css/app.0b79487b.css rel = preload as = style > < link href=../js/app.67ace555.js rel = preload as = script > < link href=../js/chunk-vendors.e7ac9ff2.js rel = preload as = script > < link href=../css/app.0b79487b.css rel = stylesheet > </ head > < body > < div id = app ></ div > < script src=../js/chunk-vendors.e7ac9ff2.js></ script > < script src=../js/app.67ace555.js></ script > </ body > </ html > |