vue-router的base和vue.config.js的publicPath区别和联系
??vue-router的base官方文档解释：
base
类型: string
默认值: "/"
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"
??vue.config.js的publicPath官方文档解释：
1.只设置vue-router的base配置
??配置路由基准路径为app,vue.config.js配置文件的publicPath为相对路径。
??路由配置：
const router = new VueRouter({
mode: 'history',
base: '/app',
routes
})
??vue.config.js配置：
module.exports = {
publicPath: './',
/* 输出文件目录：在npm run build时，生成文件的目录名称 */
outputDir: 'dist',
/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
assetsDir: 'assets',
/* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
productionSourceMap: false,
/* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
filenameHashing: false,
/* 代码保存时进行eslint检测 */
lintOnSave: true
/* webpack-dev-server 相关配置 */
}
??用http-server(一个本地小型服务器插件)启动dist下打包后的代码
??访问http://10.1.2.56:8080/app 路径，发现访问不到页面
??访问http://10.1.2.56:8080/路径，却可以访问到页面
??在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径
??访问http://10.1.2.56:8080/app 路径，现在可以访问到页面了
??访问http://10.1.2.56:8080 路径，也可以访问页面
??如果在把 base: ‘/app’,改为base: ‘/’,并且和上面一样在dist下新增添一个app目录，把dist下文件放到app下。
??访问http://10.1.2.56:8080 路径，是访问不到页面的，如下：
?? 总结：如果整个单页应用服务在 /app/ 下(可以理解为放在app文件夹下)，然后 base 就应该设为 “/app/”，这样设置之后，通过ip+端口/app，可以访问到页面，也即是项目基座路径就是/app,而且即是你不通过基准路径访问项目也可以，效果和通过基准路径是一样的。
2.只设置vue.config.js的publicPath
??路由配置：
const router = new VueRouter({
mode: 'history',
base: '/',
routes
})
??vue.config.js配置：
module.exports = {
publicPath: '/app',
/* 输出文件目录：在npm run build时，生成文件的目录名称 */
outputDir: 'dist',
/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
assetsDir: 'assets',
/* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
productionSourceMap: false,
/* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
filenameHashing: false,
/* 代码保存时进行eslint检测 */
lintOnSave: true
/* webpack-dev-server 相关配置 */
}
??配置路由基准路径为/相对路径,vue.config.js配置文件的publicPath为app。
??访问http://10.1.2.56:8080/，报如下错误
??从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。
??访问http://10.1.2.56:8080/
??访问http://10.1.2.56:8080/app/
??点击Home，访问效果如下：
??总结：如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/app/，则设置 publicPath 为 /app/。如果nginx，一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。’/'就行
2.同时设置vue-router的base配置和vue.config.js的publicPath
??路由配置：
const router = new VueRouter({
mode: 'history',
base: '/app',
routes
})
??vue.config.js配置：
module.exports = {
publicPath: '/app',
/* 输出文件目录：在npm run build时，生成文件的目录名称 */
outputDir: 'dist',
/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
assetsDir: 'assets',
/* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
productionSourceMap: false,
/* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
filenameHashing: false,
/* 代码保存时进行eslint检测 */
lintOnSave: true
/* webpack-dev-server 相关配置 */
}
??配置路由基准路径为app,vue.config.js配置文件的publicPath为app。
??访问http://10.1.2.56:8080/地址效果如下:
??从上面可以得知，静态资源文件都是在app下的，所以还是和上面环节一样在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。
??访问http://10.1.2.56:8080/地址效果如下:
??访问http://10.1.2.56:8080/app/地址效果如下:
??总结，当访问http://10.1.2.56:8080/app/可以看到Home页面内容，证明项目基准路径base: ‘/app’ 起作用了，而只设置了vue.config.js的publicPath当访问http://10.1.2.56:8080/app/是看不到home页面内容的。这就是同时设置vue-router的base配置和vue.config.js的publicPath的效果。