vue-router的base和vue.config.js的publicPath区别和联系

如果要加前缀，三者要保持一致。

一.官方文档解释

vue-router的base官方文档解释：

base
类型: string

默认值: "/"
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

vue.config.js的publicPath官方文档解释：

 

二.配置含义

publicPath是控制静态资源访问路径。

router的base是控制路由跳转前缀。

nginx是控制静态资源放在服务器的位置，反向代理。

 三.配置详情

类型	配置	实际对应地址
publicPath	publicPath:'/bbb/'	http://localhost:8080/bbb/static/js/7.js
router	base: '/bbb/',	http://localhost:8080/bbb/servicePackage
nginx	location /bbb/	http://localhost:8080/bbb/

四.原因

• publicPath：设置成/bbb/，就表示绝对地址，在根目录下面的/bbb/，访问对应static中静态资源。如果配置“. /”，也是可以的，表示相对路径，当前路径下的静态资源，因为nginx和router配置了相同的，所以对应路径的静态资源肯定能找到。
• router：路由跳转有统一的前缀，这样就能对应上nginx的地址，找到对应的页面。
• nginx：/bbb/，根目录不一定有bbb，一般会将项目放在统一固定地方，所以反向代理指一下。

五.注意

history模式下，配置路由基准路径为app,vue.config.js配置文件的publicPath ‘./’时，一定要设置vue-router的base配置

       
 文档参考：vue（1）-配置（1）publicpath、nginx、vue-router的base_qq_42440919的博客-CSDN博客_publicpath配置vue-router的base和vue.config.js的publicPath区别和联系_闲人不梦卿的博客-CSDN博客_router.config.js