欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue開發(fā)中的base和publicPath的區(qū)別

 更新時(shí)間：2024年07月09日 10:58:38   作者：yqcoder  
本文主要介紹了vue開發(fā)中的base和publicPath的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

1. publicPath

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

比如：如果配置是 publicPath: "./" 或者 publicPath: ""，那么打包后 index.html 里的資源就是引入的相對路徑，訪問 www.a.com 那它的資源就是在 www.a.com/assets/xxx.js 下，這沒問題，但是如果訪問的路由 www.a.com/a/b/c，因?yàn)槭菃雾擁?xiàng)目只有一個(gè) index.html，所以這時(shí)資源路徑是 www.a.com/a/b/assets/xxx.js，這就不對了，拿不到資源，就報(bào)錯(cuò)了。所以我們需要將這個(gè)值設(shè)置為絕對路徑 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 文件夾下。路由匹配組件，線上可能就會有問題。比如我們路由寫的 /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án)境變量里，到時(shí)候可以直接修改，不更改內(nèi)部代碼。

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

相關(guān)文章

  • uniapp開發(fā)打包多端應(yīng)用完整方法指南

    uniapp開發(fā)打包多端應(yīng)用完整方法指南

    這篇文章主要介紹了uniapp開發(fā)打包多端應(yīng)用完整流程指南,包括了uniapp打包小程序，uniapp打包安卓apk，uniapp打包IOS應(yīng)用,需要的朋友可以參考下
    2022-12-12
  • VUE腳手架框架編寫簡潔的登錄界面的實(shí)現(xiàn)

    VUE腳手架框架編寫簡潔的登錄界面的實(shí)現(xiàn)

    本文主要介紹了VUE腳手架框架編寫簡潔的登錄界面的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • 一文帶你詳細(xì)了解Vue中的v-for

    一文帶你詳細(xì)了解Vue中的v-for

    v-for循環(huán)遍歷數(shù)據(jù),永遠(yuǎn)不要把v-if和v-for同時(shí)用在同一個(gè)元素上,下面這篇文章主要給大家介紹了關(guān)于如何通過一文帶你詳細(xì)了解Vue中v-for的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • 如何使用VUE+faceApi.js實(shí)現(xiàn)攝像頭拍攝人臉識別

    如何使用VUE+faceApi.js實(shí)現(xiàn)攝像頭拍攝人臉識別

    Face-api.js是一個(gè)JavaScript API,是基于tensorflow.js核心API 的人臉檢測和人臉識別的瀏覽器實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于如何使用VUE+faceApi.js實(shí)現(xiàn)攝像頭拍攝人臉識別的相關(guān)資料,需要的朋友可以參考下
    2023-05-05
  • vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法

    vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法

    這篇文章主要介紹了vant(ZanUi)結(jié)合async-validator實(shí)現(xiàn)表單驗(yàn)證的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue獲取token(設(shè)置token,清除token)實(shí)現(xiàn)登錄方式

    vue獲取token(設(shè)置token,清除token)實(shí)現(xiàn)登錄方式

    這篇文章主要介紹了vue獲取token(設(shè)置token,清除token)實(shí)現(xiàn)登錄方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • vue.js實(shí)現(xiàn)的幻燈片功能示例

    vue.js實(shí)現(xiàn)的幻燈片功能示例

    這篇文章主要介紹了vue.js實(shí)現(xiàn)的幻燈片功能,結(jié)合實(shí)例形式分析了vue.js實(shí)現(xiàn)幻燈片的相關(guān)樣式、配置、功能等操作技巧,需要的朋友可以參考下
    2019-01-01
  • webpack轉(zhuǎn)vite的詳細(xì)操作流程與問題總結(jié)

    webpack轉(zhuǎn)vite的詳細(xì)操作流程與問題總結(jié)

    Vite是新一代的前端開發(fā)與構(gòu)建工具,相比于傳統(tǒng)的webpack,Vite 有著極速的本地項(xiàng)目啟動(dòng)速度(通常不超過5s)以及極速的熱更新速度(幾乎無感知),下面這篇文章主要給大家介紹了關(guān)于webpack轉(zhuǎn)vite的詳細(xì)操作流程與問題總結(jié)的相關(guān)資料,需要的朋友可以參考下
    2023-03-03
  • vue setInterval 定時(shí)器失效的解決方式

    vue setInterval 定時(shí)器失效的解決方式

    這篇文章主要介紹了vue setInterval 定時(shí)器失效的解決方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue3實(shí)現(xiàn)可視化拖拽標(biāo)簽小程序功能

    Vue3實(shí)現(xiàn)可視化拖拽標(biāo)簽小程序功能

    這篇文章主要介紹了Vue3實(shí)現(xiàn)可視化拖拽標(biāo)簽小程序,實(shí)現(xiàn)功能可視化標(biāo)簽拖拽，雙擊標(biāo)簽可修改標(biāo)簽內(nèi)容，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2023-09-09

最新評論