快捷導(dǎo)航

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

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

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

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

訪問的文件不存在，主要是因為路徑配置問題。

提示跨域問題，不支持files協(xié)議，主要是因為esModule問題。

問題1：訪問的文件不存在，主要是因為路徑配置問題。

解決：在 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'
    ]
  },

})

再次打包問題解決——

總結(jié)

到此這篇關(guān)于vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題解決辦法的文章就介紹到這了,更多相關(guān)vue3+ts+vite打包靜態(tài)資源404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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