vue3+ts+vite打包后靜態(tài)資源404無(wú)法加載js和css問(wèn)題解決辦法
vite 打包生成的文件如果直接放在服務(wù)器中是可以正常訪問(wèn)的，但是本地直接訪問(wèn)打包生成index.html文件就會(huì)提示以下問(wèn)題。
訪問(wèn)的文件不存在，主要是因?yàn)槁窂脚渲脝?wèn)題。
提示跨域問(wèn)題，不支持files協(xié)議，主要是因?yàn)閑sModule問(wèn)題。
問(wèn)題1：訪問(wèn)的文件不存在，主要是因?yàn)槁窂脚渲脝?wèn)題。
解決：在 vite.config.js文件中配置
主要：打包靜態(tài)文件必須是根路徑，否則放到服務(wù)器找不到靜態(tài)資源（同理于webpack中的publicPath 的配置）
解決方法：
在vite.config.ts中設(shè)置：base: "./"具體代碼如下
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
base: "./", //等同于 assetsPublicPath :'./'
plugins: [vue()],
// 設(shè)置文件./src路徑為 @
resolve: {
// 設(shè)置文件./src路徑為 @
alias: [
{
find: '@',
replacement: resolve(__dirname, './src')
}
],
dedupe: [
'vue'
]
},
})
再次打包問(wèn)題解決——
總結(jié)
到此這篇關(guān)于vue3+ts+vite打包后靜態(tài)資源404無(wú)法加載js和css問(wèn)題解決辦法的文章就介紹到這了,更多相關(guān)vue3+ts+vite打包靜態(tài)資源404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 解決vite build打包后頁(yè)面不能正常訪問(wèn)的情況
- vite打包只生成了一個(gè)css和js文件問(wèn)題的解決方法
- vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問(wèn)題解決辦法
- 關(guān)于vite+vue3打包部署問(wèn)題
- vite打包優(yōu)化分片打包依賴包詳解
- Vue3在history模式下如何通過(guò)vite打包部署白屏
- 解決vite打包后白屏之router-view不生效問(wèn)題
- VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問(wèn)題解決方法
- vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法
- VUE3項(xiàng)目VITE打包優(yōu)化的實(shí)現(xiàn)
- Vite中Rollup打包的實(shí)現(xiàn)
相關(guān)文章
vue實(shí)現(xiàn)父子組件之間的通信以及兄弟組件的通信功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)父子組件之間的通信以及兄弟組件的通信功能,結(jié)合實(shí)例形式分析了vue.js組件間通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
相信大家做項(xiàng)目的時(shí)候,功能中都有導(dǎo)出模塊,下面這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel表格的詳細(xì)教程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue directive全局自定義指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限控制的操作方法
這篇文章主要介紹了vue directive全局自定義指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限控制,本文結(jié)合實(shí)例代碼對(duì)基本概念做了詳細(xì)講解，需要的朋友可以參考下2023-02-02
vue 表單驗(yàn)證按鈕事件交由父組件觸發(fā)的方法
這篇文章主要介紹了vue 表單驗(yàn)證按鈕事件交由父組件觸發(fā)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了vue3+ts使用APlayer的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題解決方案
在lodash函數(shù)工具庫(kù)中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題與解決,需要的朋友可以參考下2023-10-10
vue語(yǔ)法之render函數(shù)和jsx的基本使用
這篇文章主要介紹了vue語(yǔ)法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡(jiǎn)單介紹一下jsx的基本使用，需要的朋友可以參考下2022-08-08
el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼
本文主要介紹了el-tree的實(shí)現(xiàn)葉子節(jié)點(diǎn)單選的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue3實(shí)現(xiàn)下拉選擇框多選功能的方法詳解
在vue的實(shí)際開發(fā)過(guò)程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁(yè)面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實(shí)現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下2023-09-09
Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應(yīng)式的原理，回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應(yīng)式是否相同，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-08-08