vue3+vite+js 引用public資料夾中js檔案

新恒發表於2024-04-26
VueViteJS

vue的public的資源在打包時不會被編譯，只會copy

　所以在在src路徑下引入public資料夾下的圖片、影片、音訊，編譯不會改變其路徑，但是在src下引入public資料夾下的js、json，在打包時都會被編譯，所以直接引入會丟失路徑（因為打包時，當前頁面引入的路徑被hash打包，而public資料夾下只是被copy）故需要再src下引入public資料夾的資源需要根據情況進行處理

　　①在引入圖片類資源 （img標籤src屬性賦值絕對路徑/）

　　　　<div class="view"><img src="/moon.png" /></div>

　　②在引入js、json檔案時，需要全域性引入

　　　　1、/public/ep.js　(j藉助window物件存一個全域性變數)　　　　　

window.endpoints={
api:'http://localhost:8080/api/v1'
}

2、頁面入口index.html

在head中引入js檔案

<head>
    ....
    <script type="module"  src="/ep.js"></script>
    ....
</head>

　　3、其他頁面使用

<script setup>
    const api = window.endpoints.api
</script>

　　

相關文章