vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题

本文链接：https://blog.csdn.net/qq_42991509/article/details/119023191

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

测试背景：

每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录
部署的时候，前端打包的文件部署在服务器的一个静态资源目录下
我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内，都需要前端正确设置publicPath才能正确访问的。

打包后的文件目录：

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

一、不设置publicPath时，既设置为`''`，部署后请求路径：

如果部署根目录
http://111.222.333.444:8888/css/app.0b79487b.css
如果部署/test目录
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.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>

注意：如果css中有写background: url('/images/bgc.jpg') no-repeat center center; 类似这种根目录的图片路径的话，第二种部署，这个图片是找不到的。

二、设置为`/`时，部署后请求路径：

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>

总结：
这方式，我们要想访问到正确的目录，就需要把我们打包后的文件部署到服务器静态资源的根目录才行。
部署/test目录，我们的js、css、图片都是找不到路径的。

三、设置为`./`时，部署后请求路径：

如果部署根目录：
http://111.222.333.444:8888/css/app.0b79487b.css
如果部署\test目录：
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>
<div id=app></div>
<script src=js/chunk-vendors.e7ac9ff2.js></script>
<script src=js/app.8569d42d.js></script>
</body>
</html>

注意：如果css中有写background: url('/images/bgc.jpg') no-repeat center center; 类似这种根目录的图片路径的话，同样部署/test目录，这个图片是找不到的。

四、设置为`static`时，部署后请求路径：

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

部署根目录，资源路径全不对。
部署test目录，资源全不对。
部署/static 资源也不对

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

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

四+、设置为`/test`时

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

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

css中的background: url('/images/bgc.jpg') no-repeat center center; 同样拿不到。

五、设置为`./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 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>

六、设置为`../stati`c时，部署后请求路径：

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

// 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.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>

总结说明：

我们用的最多的就是默认部署根目录方式二和子目录方式四+ 这两种。

这里，关于图片资源的引用问题补充说明：

我们都知道，放置是src/assets目录下的图片，使用相对路径引入，通过webpack打包后的图片，一般路径不会出错。

出错的地方是，我们引入了public目录下的图片，这种图片，是不经过打包的，直接被拷贝到dist目录去了，必须使用绝对路径引入，部署在根目录下，是没有问题的，但是，部署在子目录下，这种图片就有问题，路径很难处理。

<template>
	<div>
	 	<img class="icon" :src="`${publicPath}/images/bgc1.jpg`" alt="" />
	</div>
</template>
export default {
  data() {
    return {
      publicPath: process.env.BASE_URL
      }
    }
}