前言
因為公司內部許多程式都只能用 IE 開啟,但隨著作業系統更新至 Win 10 or Win 11 已經開始不支援 IE 所以要開始著手翻舊系統,而新系統架構選擇用 .Net Core 6 MVC ,藉由這次過程學習 Visual Studio & Resharper & C# & Razor 📖
🔖 文章索引
1. 建立專案
2. 建立 Git repository
3. 新增 package.json
4. 延伸模組
5. 新增 compilerconfig.json
6. 新增 bundleconfig.json
7. 環境設定 ( Dev、Staging、Prod )
8. 取得環境變數
建立專案
專案範本: ASP.NET Core Web 應用程式 ( Model-View-Controller )
位置:習慣將專案存放至 文件
> Visual Studio 2022
> Projects
底下
記得勾選 將解決方案與專案置於相同目錄中
架構:.NET 6.0
建立 Git repository
專案開啟後首先最重要的是建立 Git repository
建立前先檢查 Git 全域設定 ( 使用者名稱、電子郵件 )
Git
> 設定
> Git 全域設定
開始建立 Git repository
上方 Git
> 建立 Git 存放庫
> 僅限本機
> .gitignore 範本
選擇 預設 ( VisualStudio )
> 授權版本:無
> 勾選 新增 README.md
新增 package.json
在 方案總管
找到專案 右鍵
點選 > 加入
> 新增項目
> C#
> ASP.NET Core
> Web
> 指令碼
> npm 設定檔
> 新增
接著就可以在終端機 npm i [-S|-D] PluginName
延伸模組
上方 延伸模組
> 管理延伸模組
安裝 Web Compiler v1.14.10
在 Rider
需改用 File Watchers
新增 compilerconfig.json
安裝 Web Compiler 後,在 all.scss 檔案按右鍵,Click「Compile file」選項
專案根目錄會新增 compilerconfig.json
將 wwwroot/scss/all.css 刪除
修改 outputFile 位置後儲存就會重新 Compile 指定的 inputFile
[
{
"outputFile": "wwwroot/css/all.css",
"inputFile": "wwwroot/scss/all.scss"
}
]
NuGet Packages
Install BuildBundlerMinifier v3.2.449
新增 bundleconfig.json
在 方案總管
找到專案 右鍵
點選 > 加入
> 新增項目
> C#
> ASP.NET Core
> 一般
> JSON 檔案
> 名稱:bundleconfig.json
記的要用 npm 下載套件
$ npm i -S bootstrap@5.1.0 bootstrap-icons@1.8.1 Vue@3.2.11
[
{
"outputFileName": "wwwroot/js/chunk-vendors.js",
"inputFiles": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
"minify": {
"enabled": false
}
},
{
"outputFileName": "wwwroot/js/vue.dev.js",
"inputFiles": [
"node_modules/vue/dist/vue.global.js"
],
"minify": {
"enabled": false
}
},
{
"outputFileName": "wwwroot/js/vue.prod.js",
"inputFiles": [
"node_modules/vue/dist/vue.global.prod.js"
],
"minify": {
"enabled": false
}
},
{
"outputFileName": "wwwroot/css/chunk-vendors.css",
"inputFiles": [
"wwwroot/css/plugins/bootstrap-icons.css"
]
}
]
環境設定 ( Dev、Staging、Prod )
Properties
> launchSettings.json
{
"iisSettings": {
...
},
"profiles": {
"ProjectName-Dev": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"applicationUrl": "https://localhost:7071;http://localhost:5071",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"ProjectName-Staging": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"applicationUrl": "https://localhost:7071;http://localhost:5071",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Staging"
}
},
"ProjectName-Prod": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"applicationUrl": "https://localhost:7071;http://localhost:5071",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Production"
}
},
"IIS Express": {
...
}
}
}
取得環境變數
@* /Views/Shared/_Layout.cshtml *@
@{
var CurrentEnvironment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
}