vue-cli设置publicPath小记

2020-06-16 06:56:52易采站长站整理

几种设置publicPath后,再对比打包后的index.html文件

测试背景:

每次打包build完后,都单独生成一个/dist文件夹,且dist中每次都只有相同文件目录
部署的时候,是部署在服务器的一个/test文件夹下

打包后的文件目录:


├─dist
├─css
├─img
└─js
index.html

一、不设置publicPath时,部署后请求路径:

http://111.222.333.444:8888/css/app.0b79487b.css


// vue.config.js

module.exports = {
// publicPath: '',
}


<!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


// vue.config.js

module.exports = {
publicPath: '/',
}


<!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


// vue.config.js

module.exports = {
publicPath: './',
}


<!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>