vue-cli设置publicPath小记

即使没有人为你鼓掌，也要优雅的谢幕，感谢自己的认真付出。我们未来都是巨星，别人信不信无所谓，我们自己必须坚信！

几种设置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 rel="nofollow noopener noreferrer" href=/css/app.0b79487b.css rel=preload as=style>
  <link rel="nofollow noopener noreferrer" href=/js/app.ba2d9b8a.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" href=/css/app.0b79487b.css rel=preload as=style>
  <link rel="nofollow noopener noreferrer" href=/js/app.ba2d9b8a.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" href=css/app.0b79487b.css rel=preload as=style>
  <link rel="nofollow noopener noreferrer" href=js/app.8569d42d.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" href=js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" 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

// vue.config.js

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

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link rel="nofollow noopener noreferrer" href=static/css/app.0b79487b.css rel=preload as=style>
  <link rel="nofollow noopener noreferrer" href=static/js/app.d0717808.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" 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

// vue.config.js

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

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link rel="nofollow noopener noreferrer" href=static/css/app.0b79487b.css rel=preload as=style>
  <link rel="nofollow noopener noreferrer" href=static/js/app.d0717808.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" 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

// vue.config.js

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

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link rel="nofollow noopener noreferrer" href=../static/css/app.0b79487b.css rel=preload as=style>
  <link rel="nofollow noopener noreferrer" href=../static/js/app.695b7ccc.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" href=../static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" 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

// vue.config.js

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

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link rel="nofollow noopener noreferrer" href=../css/app.0b79487b.css rel=preload as=style>
  <link rel="nofollow noopener noreferrer" href=../js/app.67ace555.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" href=../js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link rel="nofollow noopener noreferrer" 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>

到此这篇关于vue-cli设置publicPath小记的文章就介绍到这了,更多相关vue-cli设置publicPath内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

全站频道

大家都在搜索：