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

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

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

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

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

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

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

解決：在 vite.config.js文件中配置

主要：打包靜態(tài)文件必須是根路徑，否則放到服務器找不到靜態(tài)資源（同理于webpack中的publicPath 的配置）

解決方法：

在vite.config.ts中設置：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()],
  // 設置文件./src路徑為 @
  resolve: {
    // 設置文件./src路徑為 @
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src')
      }
    ],
    dedupe: [
      'vue'
    ]
  },

})

再次打包問題解決——

總結

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

您可能感興趣的文章:

vue實現(xiàn)父子組件之間的通信以及兄弟組件的通信功能示例
這篇文章主要介紹了vue實現(xiàn)父子組件之間的通信以及兄弟組件的通信功能,結合實例形式分析了vue.js組件間通信相關操作技巧,需要的朋友可以參考下
2019-01-01
vue導出excel表格的新手詳細教程
相信大家做項目的時候,功能中都有導出模塊,下面這篇文章主要給大家介紹了關于vue導出excel表格的詳細教程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-05-05
vue directive全局自定義指令實現(xiàn)按鈕級別權限控制的操作方法
這篇文章主要介紹了vue directive全局自定義指令實現(xiàn)按鈕級別權限控制,本文結合實例代碼對基本概念做了詳細講解，需要的朋友可以參考下
2023-02-02
vue 表單驗證按鈕事件交由父組件觸發(fā)的方法
這篇文章主要介紹了vue 表單驗證按鈕事件交由父組件觸發(fā)的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-12-12
vue3+ts使用APlayer的示例代碼
這篇文章主要介紹了vue3+ts使用APlayer的示例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
vue項目使用lodash節(jié)流防抖函數(shù)問題解決方案
在lodash函數(shù)工具庫中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下
2023-10-10
vue語法之render函數(shù)和jsx的基本使用
這篇文章主要介紹了vue語法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡單介紹一下jsx的基本使用，需要的朋友可以參考下
2022-08-08
el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼
本文主要介紹了el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
Vue3實現(xiàn)下拉選擇框多選功能的方法詳解
在vue的實際開發(fā)過程中,我們如何將以選中的值直接渲染到頁面中,下面這篇文章主要給大家介紹了關于Vue3實現(xiàn)下拉選擇框多選功能的相關資料,需要的朋友可以參考下
2023-09-09
Vue雙向數(shù)據(jù)綁定與響應式原理深入探究
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應式的原理，回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應式是否相同，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-08-08