快捷導(dǎo)航

vue3+ts+vite打包后靜態(tài)資源404無(wú)法加載js和css問(wèn)題解決辦法

更新時(shí)間：2024年04月29日 11:42:39 作者：小圳圳

這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無(wú)法加載js和css問(wèn)題的解決辦法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vite 打包生成的文件如果直接放在服務(wù)器中是可以正常訪(fǎng)問(wèn)的，但是本地直接訪(fǎng)問(wèn)打包生成index.html文件就會(huì)提示以下問(wèn)題。

訪(fǎng)問(wèn)的文件不存在，主要是因?yàn)槁窂脚渲脝?wèn)題。

提示跨域問(wèn)題，不支持files協(xié)議，主要是因?yàn)閑sModule問(wèn)題。

問(wèn)題1：訪(fǎng)問(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

VUE如何實(shí)現(xiàn)前端組件式開(kāi)發(fā)和動(dòng)態(tài)裝載詳解
Vue動(dòng)態(tài)加載是指在Vue框架中,根據(jù)需要?jiǎng)討B(tài)加載組件、模板或靜態(tài)資源的能力,這篇文章主要介紹了VUE如何實(shí)現(xiàn)前端組件式開(kāi)發(fā)和動(dòng)態(tài)裝載的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-10-10
從零寫(xiě)vue日歷組件
最近做項(xiàng)目遇到一個(gè)需求，需要制作一個(gè)定制化的日歷組件，本文主要介紹了從零寫(xiě)vue日歷組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
親自動(dòng)手實(shí)現(xiàn)vue日歷控件
這篇文章主要記錄了親自動(dòng)手實(shí)現(xiàn)vue日歷控件的詳細(xì)過(guò)程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
vue實(shí)現(xiàn)移動(dòng)端touch拖拽排序
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端touch拖拽排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享
Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
2020-03-03
vue自定義組件實(shí)現(xiàn)v-model雙向綁定數(shù)據(jù)的實(shí)例代碼
vue中父子組件通信,都是單項(xiàng)的,直接在子組件中修改prop傳的值vue也會(huì)給出一個(gè)警告,接下來(lái)就用一個(gè)小列子一步一步實(shí)現(xiàn)了vue自定義的組件實(shí)現(xiàn)v-model雙向綁定,需要的朋友可以參考下
2021-10-10
mpvue寫(xiě)一個(gè)CPASS小程序的示例
這篇文章主要介紹了mpvue寫(xiě)一個(gè)CPASS小程序的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue3中Provide和Inject的用法及工作原理詳解
在Vue 3中,Provide和Inject是一對(duì)用于組件間數(shù)據(jù)傳遞的API,通常用于父組件向其子組件傳遞數(shù)據(jù),但并不通過(guò)props的方式,本文將深入探討Provide和Inject的工作原理,并通過(guò)示例代碼幫助你理解如何在你的Vue應(yīng)用中使用它們,需要的朋友可以參考下
2025-02-02
Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue-router的HTML5 History 模式設(shè)置
這篇文章主要介紹了vue-router的HTML5 History模式設(shè)置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09