一、引用圖片資源

在vite創建的vue3項目中，引用圖片資源有以下兩種方式：

1. 直接在模板中使用路徑引用：在模板中使用標簽，通過src屬性引用圖片。例如：

<template>
  <div>
    <img src="./assets/logo.png">
  </div>
</template>

2. 在JS或CSS中使用import引用：可以在JS或CSS文件中使用import語句引用圖片資源，這種方式會讓vite自動將路徑替換成URL。例如：

<script>
  import logo from '@/assets/logo.png'
  export default {
    data() {
      return {
        logoSrc: logo
      }
    }
  }
</script>
<style>
  .logo {
    background: url(@/assets/logo.png);
  }
</style>

注意 默認情況下，TypeScript 不會將靜態資源導入視為有效的模塊。要解決這個問題，需要添加 vite/client。
Vite 默認的類型定義是寫給它的 Node.js API 的。要將其補充到一個 Vite 應用的客戶端代碼環境中，請添加一個 d.ts 聲明文件：

/// <reference types="vite/client" />

或者，你也可以將 vite/client 添加到 tsconfig.json 中的 compilerOptions.types 下：

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

二、顯式 URL 引入’?url’

在import導入資源路徑的時候后面加上’?url’就是vite的顯示URL引入方式

import testurl from '@/test/testurl.js?url'
console.log(testurl) // /src/test/testurl.js

在Vite中，加上?url參數可以觸發Vite的特殊處理機制。具體作用是Vite會將文件內容作為字符串并添加到導入語句中，并返回一個代理URL（類似/data-vite-xxx.js）。該代理URL指向Vite服務運行時生成的一個臨時文件，這個臨時文件包含了原始文件的內容。因此，加上?url參數的導入語句實際上是在請求一個臨時文件，而不是原始文件。

這種方式的應用場景是需要在運行時動態加載文件，并且不希望在生產環境中將所有文件打包到一個JavaScript文件中。例如，在一些Web應用中，需要在用戶進行交互操作時動態加載特定模塊的代碼，在這種情況下，可以使用這種方式進行模塊加載。

對于代碼import test from “./src/test.js?url”，打印出來的"/src/test.js"實際上是Vite返回的代理URL中包含的原始路徑信息，這并不代表導入的真實文件路徑。

這種引入方式可以方便地管理項目中的資源路徑和名稱，而且還可以實現一些特殊的需求，比如資源的按需加載、CDN加速等。

三、將資源引入為字符串‘?raw’

testurl.js文件內容如下：

• testurl.js
  
  我們以‘?raw’形式引入，

import testurl from '@/test/testurl.js?raw'
console.log(testurl)

此時打印出來的內容如下

可以看到這種引入方式vite將源文件的內容以字符串的形式加載了。

應用場景

舉個例子，假設我們有一個 css 文件，其中只包含了一段樣式字符串，我們并不需要對它進行編譯或預處理，只是需要直接拿到這個字符串來進行一些其他的操作。這時候，就可以像下面這樣來引入這個文件：

import myCssString from '@/styles/my.css?raw';

這樣，我們就可以拿到 my.css 文件中的樣式字符串，并進行相應處理。

四、導入腳本作為 Worker

腳本可以通過 ?worker 或 ?sharedworker 后綴導入為 web worker。

// 在生產構建中將會分離出 chunk
import Worker from './shader.js?worker'
const worker = new Worker()

// sharedworker
import SharedWorker from './shader.js?sharedworker'
const sharedWorker = new SharedWorker()

// 內聯為 base64 字符串
import InlineWorker from './shader.js?worker&inline'

眾所周知，js是單線程的，而vite對于加載靜態資源時使用 import 資源路徑 + ?worker 的方式，其實就是告訴 Vite 這份代碼是一個 Worker，需要特殊處理。在 Vite 中，Worker 也是一種模塊，通常是在主線程之外執行，并且可以利用多個 CPU 核心來進行計算和渲染。

當我們使用 import 資源路徑 + ?worker 的方式來導入一個 Worker 的時候，在 Vite 的編譯過程中，會自動將其編譯為一個字符串，然后通過 Blob 構造函數來創建一個新的 Worker 實例。這樣就可以實現在瀏覽器中利用多個 CPU 核心來并行處理大量復雜的計算任務，提高代碼運行效率。

需要注意的是，在使用 import 資源路徑 + ?worker 的方式來導入一個 Worker 的時候，我們需要確保這份代碼中沒有依賴其它模塊，否則會出現引用錯誤的問題。因此，我們通常會在 import 語句中使用相對路徑來導入 Worker 中需要的其它代碼。

舉個例子

新建一個myworker.js文件, 通過postMessage項主線程發送消息

• myworker.js

let i = 0
function timedCount() {
  i = i + 1
  postMessage(i) // 向主線程發送消息
  setTimeout(timedCount, 500) // 500ms后再次調用timedCount
}
timedCount()

在app.vue中引入

// 導入worker
import Worker from '@/test/myworker.js?worker'
const worker = new Worker()
worker.onmessage = (e) => {
  console.log(e)
  console.log('接收worker傳遞過來的值', e.data) 
}

打印結果如圖：

可以看到我們成功的接收到了來自worker 傳遞過來的值，實現了主線程和子線程之間的通信。

五、導入JSON

JSON 可以被直接導入 —— 同樣支持具名導入：

// 導入package.json
import pkg from '../package.json'
console.log(pkg)

打印的pkg內容如下：

// 具名導入
import { name } from '../package.json'
console.log(name)

打印的name值如下：