Vue中路由router的base配置与vue.config.js的publicPath配置的区别

Pilot434_o
2,101 阅读3分钟

Vue中路由router的base配置与vue.config.js的publicPath配置的区别

前言

vue前端项目开发完毕后，进行项目部署时，打包后的静态文件不是总部署在根部录下的，这个时候前端需要配合配置url的文件路径，官方有两种配置文件路径的方式base与publicPath，那么它们有什么区别呢？接下来分享一下实践中的结果。

一、官方配置解释

vue.config.js配置文件的publicPath是相对路径，配置路由的base是基准路径。

publicPath

image.png

配置参考 | Vue CLI (vuejs.org)

base

image.png

API 参考 | Vue Router (vuejs.org)

二、实践与结果

说明：

前端项目的服务器部署，使用模拟插件http-server进行模拟。
所有情况模拟部署在根目录下或子目录app下，
模拟服务地址与端口 `http://10.12.0.56:8000` ，
前端项目有两个路由`home`与`about`，`home`为默认路由。

1、无任何配置（这里指publicPath与base）

  1. 场景一：前端项目打包后的文件部署在根目录下

  • 情况一：访问http://10.12.0.56:8000, 页面正常（页面正常指页面可以正常跳转，且有默认路由home被激活）。

  • 情况二：访问http://10.12.0.56:8000/app, 找不到页面。

  1. 场景二：前端项目打包后的文件部署在根目录下的子目录app下。

  • 情况一：访问http://10.12.0.56:8000, 页面异常，未正常显示页面，有索引提示 index of /。

  • 情况二：访问http://10.12.0.56:8000/app, 页面正常。

2、只配置base

配置base基准路径如下：

const router = new VueRouter({ mode: 'history', base: '/app', routes })
  1. 场景一：前端项目打包后的文件部署在根目录下

  • 情况一：访问http://10.12.0.56:8000, 页面正常。

  • 情况二：访问http://10.12.0.56:8000/app, 找不到页面。

  1. 场景二：前端项目打包后的文件部署在根目录下的子目录app下。 访问http://10.12.0.56:8000 或 http://10.12.0.56:8000/app 都可以正常访问页面

总结：如果打包后的单页面应用被部署在根目录的子目录下，例如/app/,前端配置基准路径为/app,那么通过ip+端口/app可以正常访问，通过ip+端口访问不加/app,效果也与通过基准路径的效果一样。

3、只配置publicPath

配置publicPath相对路径如下：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/app'
    : '/'
}
  1. 场景一：前端项目打包后的文件部署在根目录下
  • 情况一：访问http://10.12.0.56:8000, 有报错，从报错可得知资源在/app下。
  1. 场景二：前端项目打包后的文件部署在根目录下的子目录app下。
  • 情况一：访问http://10.12.0.56:8000, 页面异常，未正常显示页面，有索引提示 index of /
  • 情况二：访问http://10.12.0.56:8000/app, 页面异常，页面可访问，但默认路由home未激活，点击可激活。

总结：如果应用被部署在一个子路径上，例如，应用被部署在 https://www.my-app.com/app/，则设置 publicPath 为 /app/。如果有nginx，一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，此时publicPath这个属性基本不用配置，默认/即可。

4、同时配置publicPath和base

  1. 场景一：前端项目打包后的文件部署在根目录下
  • 情况一：访问http://10.12.0.56:8000, 有报错，从报错可得知资源在/app下。
  1. 场景二：前端项目打包后的文件部署在根目录下的子目录app下。
  • 情况一：访问http://10.12.0.56:8000, 页面异常，未正常显示页面，有索引提示 index of /
  • 情况二：访问http://10.12.0.56:8000/app, 页面正常。

总结：当访问http://10.12.0.56:8000/app，可以看到Home页面内容，说明项目基准路径base: '/app' 起作用;而只配置了vue.config.js的publicPath,当访问http://10.1.2.56:8080/app/时，看不到home页面的内容。

若有不足，恳请指正。Over。

avatar
文章
阅读
粉丝