前端 JS 经典: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 的配置。

javascript 复制代码
module.exports = {
  publicPath: "/",
};

vue3 中配置 vite.config.js,其实是 vite 的配置。

javascript 复制代码
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

javascript 复制代码
import VueRouter from "vue-router";

const router = new VueRouter({
  base: "/admin",
});

vue3 中配置 base 就是配置 createWebHistory() 的第一个参数

javascript 复制代码
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory("/admin"),
});

总结:一般这两个值,我们会写在环境变量里,到时候可以直接修改,不更改内部代码。

相关推荐
Net蚂蚁代码7 分钟前
Angular入门的环境准备步骤工作
前端·javascript·angular.js
小阮的学习笔记1 小时前
electron实现加载页(启动页)
vue.js·electron
小着2 小时前
vue项目页面最底部出现乱码
前端·javascript·vue.js·前端框架
lichenyang4535 小时前
React ajax中的跨域以及代理服务器
前端·react.js·ajax
呆呆的小草5 小时前
Cesium距离测量、角度测量、面积测量
开发语言·前端·javascript
WHOAMI_老猫5 小时前
xss注入遇到转义,html编码绕过了解一哈
javascript·web安全·渗透测试·xss·漏洞原理
一 乐6 小时前
民宿|基于java的民宿推荐系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·源码
testleaf7 小时前
前端面经整理【1】
前端·面试
BillKu7 小时前
Vue3 + TypeScript + Element Plus 表格行按钮不触发 row-click 事件、不触发勾选行,只执行按钮的 click 事件
vue.js·elementui·typescript
好了来看下一题7 小时前
使用 React+Vite+Electron 搭建桌面应用
前端·react.js·electron