欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年04月29日 11:42:39   作者：小圳圳  
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

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)父子組件之間的通信以及兄弟組件的通信功能示例

    vue實現(xiàn)父子組件之間的通信以及兄弟組件的通信功能示例

    這篇文章主要介紹了vue實現(xiàn)父子組件之間的通信以及兄弟組件的通信功能,結(jié)合實例形式分析了vue.js組件間通信相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • vue導出excel表格的新手詳細教程

    vue導出excel表格的新手詳細教程

    相信大家做項目的時候,功能中都有導出模塊,下面這篇文章主要給大家介紹了關(guān)于vue導出excel表格的詳細教程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-05-05
  • vue directive全局自定義指令實現(xiàn)按鈕級別權(quán)限控制的操作方法

    vue directive全局自定義指令實現(xiàn)按鈕級別權(quán)限控制的操作方法

    這篇文章主要介紹了vue directive全局自定義指令實現(xiàn)按鈕級別權(quán)限控制,本文結(jié)合實例代碼對基本概念做了詳細講解，需要的朋友可以參考下
    2023-02-02
  • vue 表單驗證按鈕事件交由父組件觸發(fā)的方法

    vue 表單驗證按鈕事件交由父組件觸發(fā)的方法

    這篇文章主要介紹了vue 表單驗證按鈕事件交由父組件觸發(fā)的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2018-12-12
  • vue3+ts使用APlayer的示例代碼

    vue3+ts使用APlayer的示例代碼

    這篇文章主要介紹了vue3+ts使用APlayer的示例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • vue項目使用lodash節(jié)流防抖函數(shù)問題解決方案

    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語法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡單介紹一下jsx的基本使用，需要的朋友可以參考下
    2022-08-08
  • el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼

    el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼

    本文主要介紹了el-tree的實現(xiàn)葉子節(jié)點單選的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • Vue3實現(xiàn)下拉選擇框多選功能的方法詳解

    Vue3實現(xiàn)下拉選擇框多選功能的方法詳解

    在vue的實際開發(fā)過程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下
    2023-09-09
  • Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究

    Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究

    本節(jié)介紹雙向數(shù)據(jù)綁定以及響應(yīng)式的原理，回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應(yīng)式是否相同，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
    2022-08-08

最新評論