路由的 base 和webpack的publicPath（vite的base）区别

1. webpack中的output选项有两个重要配置: path和publicPath

• output.path 打包输出的目录，必须为一个绝对路径

  eg:

  output: {
   path: path.resolve(__dirname, '../dist'),
  }
  

  打包文件放置在dist目录下， _dirname 为当前文件在电脑中的绝对路径名，/a/b/dist， /a/b/就是 _dirname，path.resolve（）通过这两个参数就能指定打包后dist文件放在项目的哪个位置。

• publicPath：所有静态资源的一个基础路径，服务器从哪个目录开始寻找资源（js，css，image）。publicPath对于打包路径不会有任何影响，影响的是服务器寻找静态资源包。

  eg：

  output: {
      publicPath: '/my-app/'
  }
  

  默认为“/”，即index.html以及其他静态资源包直接在nginx/html的目录下。如果规定路径为“/my-app”，则从nginx/html/my-app/的目录下开始解析。

  所以publicPath为线上部署的路径，需要和运维商量好，运维将静态资源包需要放置在这里面，项目才能找到才能启动。

2. 路由的baseName

路由的基路径。
例如，如果整个单页应用部署 在 /app/ 下， base 就应该设为 /app/。
通常需要和线上服务的路径（webpack的publicPath等）一致

---

因为刷新地址，服务器会将所有publicPath开头的路径，且服务器没有该资源时，重定向到 index.html，将该路径交给前端路由接管，前端路由接管时，baseName就要和publicPath一致，才能让前端路由正确接管。

---

dist 目录

index.html
js / chunk.js
js / main.js
js / vue.js

dist 内容部署在： /webApp/下

刷新页面时：http：// xxx.com/webApp/home

服务器没有/home这个资源
服务器配置好 以 webApp开头的路径，没匹配到时，统统返回 index.html

---

index.html 被 webpack处理了，构建时把js 插入为 html的内联脚本

因为 webpack 配置了 publicPath：/webApp/ ，所以脚本路径为

<script src="/webApp/xx1 /xxx""></script>
<script src="/webApp/xx2 /xxx""></script>

所以通过上面的链接，能在服务器的 webApp 文件夹下拿到 子应用的所有js文件，这样vue 就能被加载出来，处理前端路由等工作。