想要在 ASP.NET MVC 5 的專案中,自動打包正確的前端變數。 ### 背景 經手一個使用 ASP.NET MVC 5 建立的純前端的專案。雖然它是一個靜態網站,但卻放在 ASP.NET MVC 5 中建立。因此,我們無法使用後端來傳遞參數,這對於管理前端發布檔帶來了一些限制。 目前都是手動以註解修改變數,可能導致漏改或變數曝光等問題。 這個專案並沒有使用到任何前端框架,因此忽略了使用前端打包工具的問題。 ### 前置準備 在開始之前,確保已經有了三種不同組態,以及對應的 js 設定檔,分別是: * Debug - `config.Debug.js` * Release - `config.Release.js` * Production - `config.Production.js` 這些設定檔應該放置在您的專案根目錄中。組態名稱與 js 設定檔的名稱可自行決定。 ### 設定專案檔 打開您的專案檔(通常是 .csproj 檔案),在其中加入以下內容: ```xml <Content Include="config.Debug.js" Condition=" '$(Configuration)' == 'Debug' "> <Link>config.js</Link> </Content> <Content Include="config.Release.js" Condition=" '$(Configuration)' == 'Release' "> <Link>config.js</Link> </Content> <Content Include="config.Production.js" Condition=" '$(Configuration)' == 'Production' "> <Link>config.js</Link> </Content> ``` * `<Content Include="config.Debug.js">`:此行表示將 `config.Debug.js` 檔案包含到專案中。 * `Condition=" '$(Configuration)' == 'Debug' "`:此條件指定只有當專案的配置為 Debug 時才會包含此檔案。這意味著在其他配置(如 Release 或 Production)下,此檔案將不被包含。 * ``<Link>config.js</Link>``:這是一個可選的元素,它指定在專案中使用的檔案名稱。在這裡,我們將 `config.Debug.js` 檔案連結到 `config.js`,這樣在專案中就可以使用 `config.js` 來引用此檔案,使其更具可讀性和統一性。 通過以上設置,只有在 Debug 配置下,`config.Debug.js` 才會被包含到專案中,並且在專案中的檔案路徑將被連結到 `config.js`。這樣做的好處是,無論使用哪個配置構建專案,前端引用的檔案名稱都是一致的,使得程式碼更易於維護和管理。 ### 引入設定檔 在 HTML 文件中,只需要引入一個 `script` 標籤即可引入設定檔: ```html <script src="config.js"></script> ``` 這樣在不同的組態下,都會引入正確的設定檔,無需手動調整。 透過這樣的設定,我們可以更方便地管理前端發布檔,並確保在不同的環境中都能正確地應用相應的設定。