publicPath理解

在vue这种框架中，通常会需要配一个publicPath（vue-cli是publicPath，vite中是base）。这个属性有什么影响呢？

它会影响打包结果中index.html里对script和css等资源的引用，举个例子，如果base配的是 / (默认值)，那么index.html中是这样的：

<script type="module" crossorigin src="/assets/index-bd6fd748.js"></script>
<link rel="modulepreload" crossorigin href="/assets/__commonjsHelpers__-7a77ea84.js">
<link rel="stylesheet" href="/assets/index-135e50ca.css">

如果base配的是 xx：

<script type="module" crossorigin src="/xx/assets/index-bd6fd748.js"></script>
<link rel="modulepreload" crossorigin href="/xx/assets/__commonjsHelpers__-7a77ea84.js">
<link rel="stylesheet" href="/xx/assets/index-135e50ca.css">

这就是这个属性的全部作用，仅此而已！

为什么要这样做呢？举个例子：如果你的网站的首页是 www.aaa.com/xx，在你的服务器的配置中，遇到/xx这个路径，会去你配置的静态文件夹下寻找文件：

server {
    listen 80;
    server_name your_domain.com;  # 替换为你的域名或 IP

    location /xx {
        root /path/to/your/static/files;  # 替换为静态文件的路径
        index index.html;  # 设置默认文档
        try_files $uri $uri/ =404;  # 尝试访问文件，不存在则返回404
    }
}

你的项目打包后的dist是这样的：

dist
- index.html
- assets
-- aaa.js
-- bbb.css

所以要访问到aaa.js的话，则需要浏览器请求这个地址：www.aaa.com/xx/assets/aaa.js，在index.html文件中对这个js文件的引用应该是：

<script type="module" crossorigin src="/xx/assets/aaa.js"></script>

tips: src值是相对于网站的host的，不是path，如果你的网页地址是 www.aaa.com/,src值配的是/assets/aaa.js，最终请求的url是 www.aaa.com//assets/aaa.js。这就是需要publicPath的原因。