vue开发中的base和publicPath的区别
前言：不知各位小伙伴有没有遇到过这样的问题，就是本地开发的好好的，结果打包后自信满满的交给运维部署，一上线，就是页面资源找不到了，跳转页面白屏了。等各种问题，这大概率就是配置问题。有这么两个配置 base 和 publicPath，在 vue2 和 vue3 的表现形式不同，下面会详细介绍。这两个配置一般影响的是生成环境，对本地开发没啥影响。
1. publicPath
publicPath 影响的是打包后外部资源的获取。
比如：如果配置是 publicPath: "./" 或者 publicPath: ""，那么打包后 index.html 里的资源就是引入的相对路径，访问 www.a.com 那它的资源就是在 www.a.com/assets/xxx.js 下，这没问题，但是如果访问的路由 www.a.com/a/b/c，因为是单页项目只有一个 index.html，所以这时资源路径是 www.a.com/a/b/assets/xxx.js，这就不对了，拿不到资源，就报错了。所以我们需要将这个值设置为绝对路径 publicPath: "/"。那么不管路由跳转到哪，资源都是在 www.a.com/assets/xxx.js 下的。
vue2 中配置 vue.config.js，其实是 webpack 的配置。
module.exports = {
publicPath: "/",
};vue3 中配置 vite.config.js，其实是 vite 的配置。
import { defineConfig } from "vite";
export default defineConfig(() => {
return {
base: "/",
};
});2. base
base 影响的是组件匹配。
假如运维将我们的站点部署到一个子目录下。比如 admin 文件夹下。路由匹配组件，线上可能就会有问题。比如我们路由写的 /user，转化成完整路径就是 www.a.com/user 去匹配 User.vue 组件，但是生产上是 www.a.com/admin/user 去匹配 User.vue 组件，那肯定就匹配不上，所以我们需要在 router 配置里面，统一配置下 base: "/admin"。
vue2 中配置 base
import VueRouter from "vue-router";
const router = new VueRouter({
base: "/admin",
});vue3 中配置 base 就是配置 createWebHistory() 的第一个参数
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory("/admin"),
});总结：一般这两个值，我们会写在环境变量里，到时候可以直接修改，不更改内部代码。
到此这篇关于vue开发中的base和publicPath的区别的文章就介绍到这了,更多相关vue base publicPath内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了uniapp开发打包多端应用完整流程指南,包括了uniapp打包小程序，uniapp打包安卓apk，uniapp打包IOS应用,需要的朋友可以参考下2022-12-12
本文主要介绍了VUE脚手架框架编写简洁的登录界面的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
v-for循环遍历数据,永远不要把v-if和v-for同时用在同一个元素上,下面这篇文章主要给大家介绍了关于如何通过一文带你详细了解Vue中v-for的相关资料,需要的朋友可以参考下2022-10-10
Face-api.js是一个JavaScript API,是基于tensorflow.js核心API 的人脸检测和人脸识别的浏览器实现,这篇文章主要给大家介绍了关于如何使用VUE+faceApi.js实现摄像头拍摄人脸识别的相关资料,需要的朋友可以参考下2023-05-05
vant(ZanUi)结合async-validator实现表单验证的方法
这篇文章主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue获取token(设置token,清除token)实现登录方式
这篇文章主要介绍了vue获取token(设置token,清除token)实现登录方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue.js实现的幻灯片功能,结合实例形式分析了vue.js实现幻灯片的相关样式、配置、功能等操作技巧,需要的朋友可以参考下2019-01-01
Vite是新一代的前端开发与构建工具,相比于传统的webpack,Vite 有着极速的本地项目启动速度(通常不超过5s)以及极速的热更新速度(几乎无感知),下面这篇文章主要给大家介绍了关于webpack转vite的详细操作流程与问题总结的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue setInterval 定时器失效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue3实现可视化拖拽标签小程序,实现功能可视化标签拖拽，双击标签可修改标签内容，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-09-09
最新评论