几种设置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>

六、设置为../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 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
      }
    }
}

在template中，我们可以使用process.env.BASE_URL这种拼接方式实现路径正确。

在css中，如果我们引入public目录的背景图，部署在子目录下，这种图片路径，就gg了。所有，css中图片引入，最好是src目录下的，经过webpack打包，就可以了。

Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/

avatar GitCode 开源社区
cover

用C++实现4种YOLO目标检测（内附完整代码）

avatar GitCode 开源社区
cover

静态时序分析：SDC约束命令create_generated_clock详解（上）

avatar GitCode 开源社区