【Unity】打包WebGL項目遇到的問題及解决記錄

Unity中打包時注意事項

切換平臺為WebGL平臺

保證在平臺切換後項目能在Unity中運行。

設置Player Setting

分辨率預設

其它設置

取消勾選Strip Engine Code，這個選項標識官⽅⽂檔是這樣描述它的"如果被選中，unity會默認剝離在項⽬中不會使⽤的組件"，也就是說，假如你的項⽬中沒有⾳頻功能，unity會在封裝的時候去掉這部分代碼以减少⼤⼩。最好取消勾選。

發布設置

將壓縮禁用，這樣打包出來的文件數據後綴為.data。

確保項目路徑沒有中文

硬盤盤符最好也是英文，接著就能點擊Build打包了。

選擇Assets同級目錄打包

點擊Build打包後，會提示選擇打包後的包存放路徑。
在項目的Assets同級目錄下新建一個Pak文件夾，用於存放打包好後的包。

打包後將項目部署到IIS上發布

安裝IIS並添加網站

在本機上安裝IIS（Internet Information Services），打開後右鍵本機添加網站，並添加剛剛打包出的包存放比特置。

為服務器添加 MIME Type 映射和跨域訪問權限

添加MIME Type映射

由於打包出來有後綴為.data的文件，服務器不能解析其為什麼類型的。因此，需要在IIS中添加MIME類型。

雙擊後右上角找添加。

為.data文件添加MIME類型為multipart/form-data。

這時，IIS會自動編寫一個web.config文件。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".data" mimeType="multipart/form-data" />
        </staticContent>
    </system.webServer>
</configuration>

添加跨域訪問權限

什麼是跨域？
只有當協議、端口、和域名都相同的頁面，則兩個頁面具有相同的源。只要網站的協議名protocol、 主機host、 端口號port這三個中的任意一個不同，網站間的數據請求與傳輸便構成了跨域調用，會受到同源策略的限制。
解决辦法：
添加跨域訪問權限。
找到HTTP響應標頭後雙擊。

同樣的，右上角點擊添加，加入如下內容。

//名稱                           值
Access-Control-Allow-Origin      *
Access-Control-Allow-Methods     GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers     Content-Type

同樣是IIS自動在web.config文件中添加相應設置。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".data" mimeType="multipart/form-data" />
        </staticContent>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="Content-Type" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

嘗試訪問html網站

選中剛才添加的Pak文件夾，右側找瀏覽 *:80(http)選項，即可訪問html網站了。

訪問遇到的問題

在訪問的過程中不是那麼的順利，遇到了一些問題，按F12鍵檢查Console的輸出以查看是什麼問題導致的加載問題。

Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico

瀏覽器找不到favicon.ico文件，需要手動在根目錄下新建一個。

Range Out Of Bounds

Unity中資源太大，導致內存溢出。
由於2020版本的Unity在Player Settings中找不到設置Memory Size的地方。
因此在Assets文件夾下新建一Editor文件夾，新建一SetMemorySize脚本用於在菜單欄中手動設置MemorySize和獲取當前MemorySize：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SetMemorySize : UnityEditor.Editor
{
    
    [UnityEditor.MenuItem("WebGLPak/Set Size")]
    public static void SetSize()
    {
    
        UnityEditor.PlayerSettings.WebGL.memorySize = 2 * 1024 * 1024 * 1000;
    }

    [UnityEditor.MenuItem("WebGLPak/Get Size")]
    public static void GetSize()
    {
    
        Debug.LogError(UnityEditor.PlayerSettings.WebGL.memorySize);
    }
}

不顯示中文字體

由於unity默認使用的是Arial,導致打包成webgl時中文不顯示。
需要在電腦C盤下，路徑為C:\Windows\Fonts導入一個格式為.ttf的中文字體，將Arial字體替換成導入的中文字體即可。

瀏覽器不支持WebGL

需在瀏覽器快捷方式的屬性中的目標處後加空格並添加啟動項：

-enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files