refactor: use env vars to set API URL and dev port

Author: guansss

.env

@@ -1,2 +1,5 @@
-VITE_USE_PRODUCTION_API=true
+# 后端接口地址
+VITE_API=https://prts.maa.plus
+
+# 地图站地址
 VITE_THERESA_SERVER=https://theresa.wiki

.env.development

@@ -0,0 +1,5 @@
+# 本地开发端口
+PORT=3000
+
+# 如果需要使用生产环境的API，请把下面一行注释掉，或者在.env.development.local中覆盖
+VITE_API=https://maa-docker.kkdy.tech

README.md

@@ -4,6 +4,8 @@ MAA 作业站前端！
 
 ## 开发流程
 
+后端接口文档：https://maa-docker.kkdy.tech/swagger-ui/index.html
+
 该仓库的主分支为 `dev`，线上分支为 `main`，代码合并到 `main` 后将会自动部署到线上
 
 在自己的 fork 上开发完成后请提交 PR 到 `dev` 分支，由管理员合并
@@ -12,15 +14,9 @@ MAA 作业站前端！
 
 ## 环境变量
 
-环境变量在 `.env` 文件内定义，你也可以创建 `.env.local` 来覆盖 `.env` 的配置
-
-```ini
-# 使用线上的后端 API，否则使用本地开发服务器
-VITE_USE_PRODUCTION_API=true
+环境变量定义在 `.env` `.dev.development` 文件内
 
-# 地图服务器，如果正在对地图进行本地开发请改为例如 http://localhost:3001
-VITE_THERESA_SERVER=https://theresa.wiki
-```
+你可以创建 `.env.development.local` 文件来覆盖环境变量，优先级为 `.env.development.local` > `.env.development` > `.env`
 
 ## 命令
 

src/utils/envvar.ts

@@ -4,15 +4,15 @@ import unfetch from 'unfetch'
 
 import { Response } from 'models/network'
 
-import { envUseProductionApi } from './envvar'
-
 const fetch = window.fetch || unfetch
 
 export class NetworkError extends Error {}
 
-const baseURL = envUseProductionApi
-  ? 'https://prts.maa.plus'
-  : 'http://localhost:5259'
+if (!import.meta.env.VITE_API) {
+  throw new Error('env var VITE_API is not set')
+}
+
+const baseURL = import.meta.env.VITE_API as string
 
 export const FETCHER_CONFIG: {
   apiToken?: () => Promise<string | undefined>

src/utils/fetcher.ts

@@ -1,20 +1,26 @@
 import react from '@vitejs/plugin-react'
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import viteTsconfigPath from 'vite-tsconfig-paths'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), viteTsconfigPath()],
-  server: {
-    port: 3000,
-  },
-  resolve: {
-    alias: {
-      src: require('path').resolve(__dirname, 'src'),
+export default defineConfig(({ command, mode }) => {
+  // Load env file based on `mode` in the current working directory.
+  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
+  const env = loadEnv(mode, process.cwd(), '')
+
+  return {
+    plugins: [react(), viteTsconfigPath()],
+    server: {
+      port: +env.PORT || undefined,
+    },
+    resolve: {
+      alias: {
+        src: require('path').resolve(__dirname, 'src'),
+      },
+    },
+    build: {
+      sourcemap: true,
     },
-  },
-  build: {
-    sourcemap: true,
-  },
+  }
 })