1、下看一下publicPath字段出现的位置
vue.config.js
webpack.config.js
2、官网中的解释(可以忽略)
3、用人话解释publicPath
场景说明：
- 每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录
- 部署的时候，是部署在服务器的一个/test文件夹下
- 打包后的文件目录结构
一、不设置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>
|
6
0
已为社区贡献1条内容
所有评论(0)