前言：不知各位小伙伴有沒(méi)有遇到過(guò)這樣的問(wèn)題，就是本地開(kāi)發(fā)的好好的，結(jié)果打包后自信滿(mǎn)滿(mǎn)的交給運(yùn)維部署，一上線，就是頁(yè)面資源找不到了，跳轉(zhuǎn)頁(yè)面白屏了。等各種問(wèn)題，這大概率就是配置問(wèn)題。有這么兩個(gè)配置 base 和 publicPath，在 vue2 和 vue3 的表現(xiàn)形式不同，下面會(huì)詳細(xì)介紹。這兩個(gè)配置一般影響的是生成環(huán)境，對(duì)本地開(kāi)發(fā)沒(méi)啥影響。

1. publicPath

publicPath 影響的是打包后外部資源的獲取。

比如：如果配置是 publicPath: "./" 或者 publicPath: ""，那么打包后 index.html 里的資源就是引入的相對(duì)路徑，訪問(wèn) www.a.com 那它的資源就是在 www.a.com/assets/xxx.js 下，這沒(méi)問(wèn)題，但是如果訪問(wèn)的路由 www.a.com/a/b/c，因?yàn)槭菃雾?yè)項(xiàng)目只有一個(gè) index.html，所以這時(shí)資源路徑是 www.a.com/a/b/assets/xxx.js，這就不對(duì)了，拿不到資源，就報(bào)錯(cuò)了。所以我們需要將這個(gè)值設(shè)置為絕對(duì)路徑 publicPath: "/"。那么不管路由跳轉(zhuǎn)到哪，資源都是在 www.a.com/assets/xxx.js 下的。

vue2 中配置 vue.config.js，其實(shí)是 webpack 的配置。

module.exports = {
  publicPath: "/",
};

vue3 中配置 vite.config.js，其實(shí)是 vite 的配置。

import { defineConfig } from "vite";

export default defineConfig(() => {
  return {
    base: "/",
  };
});

2. base

base 影響的是組件匹配。

假如運(yùn)維將我們的站點(diǎn)部署到一個(gè)子目錄下。比如 admin 文件夾下。路由匹配組件，線上可能就會(huì)有問(wèn)題。比如我們路由寫(xiě)的 /user，轉(zhuǎn)化成完整路徑就是 www.a.com/user 去匹配 User.vue 組件，但是生產(chǎn)上是 www.a.com/admin/user 去匹配 User.vue 組件，那肯定就匹配不上，所以我們需要在 router 配置里面，統(tǒng)一配置下 base: "/admin"。

vue2 中配置 base

import VueRouter from "vue-router";

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

vue3 中配置 base 就是配置 createWebHistory() 的第一個(gè)參數(shù)

import { createRouter, createWebHistory } from "vue-router";

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

總結(jié)：一般這兩個(gè)值，我們會(huì)寫(xiě)在環(huán)境變量里，到時(shí)候可以直接修改，不更改內(nèi)部代碼。

到此這篇關(guān)于vue開(kāi)發(fā)中的base和publicPath的區(qū)別的文章就介紹到這了,更多相關(guān)vue base publicPath內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論