vue-router的base和vue.config.js的publicPath区别和联系
如果要加前缀,三者要保持一致。vue-router的base官方文档解释:vue.config.js的publicPath官方文档解释:publicPath是控制静态资源访问路径。router的base是控制路由跳转前缀。nginx是控制静态资源放在服务器的位置,反向代理。history模式下,配置路由基准路径为app,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
更多推荐
已为社区贡献8条内容
所有评论(0)