Vue单页应用打包后，如何改写相对、绝对路径为长尾关键词？

本文共计730个文字，预计阅读时间需要3分钟。

在项目开发与部署过程中，运用了反向代理。这要求前端代码中不能使用绝对路径。但通常情况下，通过webpack+vuecli默认打包后的HTML、CSS、JS等文件，使用的都是相对路径。

在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下：

1、打包后的index.html文件

2、打包后的css文件

所以，如果在项目中需要使用相对路径来获取静态的资源文件，需要怎么做呢？

1、修改webpack配置文件中的assetsPublicPath，修改为如下图所示。

修改配置后，进行打包发现，打包后的index.html文件中，对css等文件的调用，变成相对路径。

但是同时我们也会的发现这样修改后，导致打包后的css文件中，图片的路径出现问题，如下所示，图片路径出错导致图片找不到。