Vue3打包部署報(bào)錯(cuò)的解決方案
Vue3打包部署報(bào)錯(cuò)
通常情況下，我們直接npm run build后的代碼可以直接部署在服務(wù)器上，以便老板遠(yuǎn)程訪問。但是今天寫了個(gè)簡(jiǎn)單的demo發(fā)現(xiàn)部署后不能直接訪問。作為一個(gè)菜鳥，被領(lǐng)導(dǎo)催的也是心急如焚。
但奇怪的是，vscode的open live server卻沒有任何問題。
冥思苦想苦思冥想無(wú)法解決，問了同事大佬，原來(lái)是要在打包前的vue config下加一下publicPath：‘./’：
于是重新打包，再部署到服務(wù)器，解決啦?。?！
知其然還要知其所以然，我們看一下官網(wǎng)的解釋：
- 部署應(yīng)用包時(shí)的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到這個(gè)值，所以請(qǐng)始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
- 默認(rèn)情況下，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上，例如 https://www.my-app.com/。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/，則設(shè)置 publicPath 為 /my-app/。
- 這個(gè)值也可以被設(shè)置為空字符串 ('') 或是相對(duì)路徑 ('./')，這樣所有的資源都會(huì)被鏈接為相對(duì)路徑，這樣打出來(lái)的包可以被部署在任意路徑
vue3 vite 打包部署后,訪問報(bào)錯(cuò)
Expected a JavaScript module script but the server responded with a MIME type of
其實(shí)這個(gè)很簡(jiǎn)單：
在vite.config.js中：
將base對(duì)應(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: '/',
?? ?};
});以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧
uni-app基于VUE開發(fā)，通常組件的使用都是先安裝，然后全局或者局部引入，注冊(cè)，今天通過本文給大家分享easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧，需要的朋友一起看看吧2021-08-08
本篇文章主要介紹了vue-router 組件復(fù)用問題詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-01-01
vue實(shí)現(xiàn)可以快進(jìn)后退的跑馬燈組件
這篇文章主要為大家詳細(xì)介紹了vue編寫一個(gè)可以快進(jìn)后退的跑馬燈組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue+element-ui?校驗(yàn)開始時(shí)間與結(jié)束時(shí)間的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+element-ui?校驗(yàn)開始時(shí)間與結(jié)束時(shí)間的代碼實(shí)現(xiàn),最主要的需求是開始時(shí)間不能早于當(dāng)前時(shí)間,感興趣的朋友跟隨小編一起看看吧2024-07-07
vue3.0父?jìng)鹘o子的值不隨父組件改變而改變問題及解決
這篇文章主要介紹了vue3.0父?jìng)鹘o子的值不隨父組件改變而改變問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境
這篇文章主要介紹了打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-07-07
這篇文章主要介紹了解決iView Table組件寬度只變大不變小的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-11-11
unplugin-auto-import與unplugin-vue-components安裝問題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue瀑布流插件的使用示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
Vue2.0 axios前后端登陸攔截器(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇Vue2.0 axios前后端登陸攔截器(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-10-10