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實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11關(guān)于Vue?ui?的沒反應(yīng)、報錯問題解決總結(jié)
這篇文章主要介紹了關(guān)于Vue?ui?的沒反應(yīng)、報錯問題解決總結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法
這篇文章主要給大家介紹了關(guān)于前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用select具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07解讀element?el-upload上傳的附件名稱不顯示?file-list賦值
這篇文章主要介紹了解讀element?el-upload上傳的附件名稱不顯示?file-list賦值問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10