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

Vue3打包部署報錯的解決方案

 更新時間:2022年06月02日 14:10:01   作者:吃素雞的鵝  
這篇文章主要介紹了Vue3打包部署報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

Vue3打包部署報錯

通常情況下,我們直接npm run build后的代碼可以直接部署在服務(wù)器上,以便老板遠程訪問。但是今天寫了個簡單的demo發(fā)現(xiàn)部署后不能直接訪問。作為一個菜鳥,被領(lǐng)導(dǎo)催的也是心急如焚。

但奇怪的是,vscode的open live server卻沒有任何問題。

冥思苦想苦思冥想無法解決,問了同事大佬,原來是要在打包前的vue config下加一下publicPath:‘./’:

于是重新打包,再部署到服務(wù)器,解決啦?。。?/p>

知其然還要知其所以然,我們看一下官網(wǎng)的解釋:

  • 部署應(yīng)用包時的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到這個值,所以請始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
  • 默認情況下,Vue CLI 會假設(shè)你的應(yīng)用是被部署在一個域名的根路徑上,例如 https://www.my-app.com/。如果應(yīng)用被部署在一個子路徑上,你就需要用這個選項指定這個子路徑。例如,如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/,則設(shè)置 publicPath 為 /my-app/。
  • 這個值也可以被設(shè)置為空字符串 ('') 或是相對路徑 ('./'),這樣所有的資源都會被鏈接為相對路徑,這樣打出來的包可以被部署在任意路徑

vue3 vite 打包部署后,訪問報錯

Expected a JavaScript module script but the server responded with a MIME type of

其實這個很簡單:

在vite.config.js中:

將base對應(yīng)的屬性從'./'改為'/'即可

import { defineConfig, loadEnv, ConfigEnv } from 'vite';
const viteConfig = defineConfig((mode: ConfigEnv) => {
?? ?const env = loadEnv(mode.mode, process.cwd());
?? ?return {
?? ??? ?plugins: [vue()],
?? ??? ?root: process.cwd(),
?? ??? ?resolve: { alias },
?? ??? ?base: '/',
?? ?};
});

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue開發(fā)設(shè)計分支切換與cleanup實例詳解

    vue開發(fā)設(shè)計分支切換與cleanup實例詳解

    這篇文章主要為大家介紹了vue開發(fā)設(shè)計分支切換與cleanup實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • 關(guān)于Vue?ui?的沒反應(yīng)、報錯問題解決總結(jié)

    關(guān)于Vue?ui?的沒反應(yīng)、報錯問題解決總結(jié)

    這篇文章主要介紹了關(guān)于Vue?ui?的沒反應(yīng)、報錯問題解決總結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue項目中按鈕防抖處理實現(xiàn)過程

    vue項目中按鈕防抖處理實現(xiàn)過程

    這篇文章主要給大家介紹了關(guān)于vue項目中按鈕防抖處理實現(xiàn)的相關(guān)資料,在項目開發(fā)中相必大家時常會遇到按鈕重復(fù)點擊后引起事件重復(fù)提交的問題,需要的朋友可以參考下
    2023-08-08
  • Vue3中簡單實現(xiàn)動態(tài)添加路由

    Vue3中簡單實現(xiàn)動態(tài)添加路由

    本文主要介紹了Vue3中簡單實現(xiàn)動態(tài)添加路由,,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • 前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法

    前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法

    這篇文章主要給大家介紹了關(guān)于前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用select具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • Vue生命周期實例分析總結(jié)

    Vue生命周期實例分析總結(jié)

    Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue()開始就是vue生命周期的開始。Vue實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過程,稱這是Vue的?命周期
    2022-10-10
  • 詳解vue使用$http服務(wù)端收不到參數(shù)

    詳解vue使用$http服務(wù)端收不到參數(shù)

    這篇文章主要介紹了vue使用$http服務(wù)端收不到參數(shù),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • 解讀element?el-upload上傳的附件名稱不顯示?file-list賦值

    解讀element?el-upload上傳的附件名稱不顯示?file-list賦值

    這篇文章主要介紹了解讀element?el-upload上傳的附件名稱不顯示?file-list賦值問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 詳解使用vue實現(xiàn)tab 切換操作

    詳解使用vue實現(xiàn)tab 切換操作

    這篇文章主要介紹了詳解使用vue實現(xiàn)tab操作,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • vue實現(xiàn)一個單獨的組件注釋

    vue實現(xiàn)一個單獨的組件注釋

    這篇文章主要介紹了vue實現(xiàn)一個單獨的組件注釋,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評論