相对路径的详细用法

为什么可以通过nginx访问打包的vue项目，但是直接用浏览器打开vue打包生成的index.html就是一片空白，请问这是什么原理？

server {
    listen       80;
    server_name  yourdomain.com;

    location /project1/ {
        alias /path/to/project1/;
        try_files $uri $uri/ /project1/index.html;
    }

    location /project2/ {
        alias /path/to/project2/;
        try_files $uri $uri/ /project2/index.html;
    }
}

答：当我们在本地使用npm run build命令打包 Vue 项目时，会生成一个dist目录，里面包含了静态资源文件和index.html文件。这个index.html文件中的静态资源文件路径都是相对路径，比如/js/app.xxx.js，这个路径指的是在当前网站的根目录下的js目录下的app.xxx.js文件。假设我们将这个dist目录部署到了服务器上，同时使用 Nginx 配置反向代理，那么请求http://example.com/project1/时，Nginx 会把请求转发到/path/to/project1/目录下的index.html文件，此时由于 Nginx 配置了location中的alias，因此 Nginx 会把相对路径中的/解析为/path/to/project1/，所以/js/app.xxx.js实际指向的是/path/to/project1/js/app.xxx.js，这个文件的路径是正确的，可以被加载。但是如果直接在浏览器中打开index.html文件，这时候的相对路径中的/会被解析成浏览器当前所在的路径，比如file:///C:/Users/xxx/Desktop/index.html，此时的/js/app.xxx.js实际指向的就是file:///C:/js/app.xxx.js，这个路径是不存在的，因此浏览器无法加载静态资源文件，导致页面空白。

在相对路径中“/js/app.xxx.js”和“js/app.xxx.js”什么区别？

答：在相对路径中，“/js/app.xxx.js"和"js/app.xxx.js"有很大的区别。”/js/app.xxx.js"表示相对于根目录的路径，而"js/app.xxx.js"表示相对于当前页面的路径。
举个例子，假设我们有一个网站根目录为"/home/user/www/“，其中包含一个index.html页面和一个js目录，js目录下包含一个app.xxx.js文件。如果我们在index.html中使用”/js/app.xxx.js"作为js文件的路径，浏览器会在根目录下寻找js目录并加载app.xxx.js文件；如果我们使用"js/app.xxx.js"作为js文件的路径，浏览器会在当前页面的目录下寻找js目录并加载app.xxx.js文件。
因此，"/“符号表示根目录，而没有”/"表示当前页面所在的目录。

在相对路径中，以斜杠（/）开头的路径表示相对于根目录的路径，而不以斜杠开头的路径表示相对于当前页面所在的目录的路径。

例如，假设当前页面的 URL 是 https://example.com/path/to/index.html，那么：

相对路径 /js/app.xxx.js 表示 https://example.com/js/app.xxx.js；
相对路径 js/app.xxx.js 表示 https://example.com/path/to/js/app.xxx.js。
因此，在使用相对路径时需要根据具体的情况选择使用以斜杠开头的路径还是不以斜杠开头的路径。