feat: 实现环境变量的分离开发

README.md

@@ -6,6 +6,21 @@
 
 Svelte + daysiUI
 
+## 打包注意事项
+
+使用了 [vite-plugin-env-command](https://www.npmjs.com/package/vite-plugin-env-command) 进行打包简化
+
+```bash
+# 这是 dev 模式开发
+npm run dev:dev
+
+# 这是 prod 模式开发
+npm run dev:prod
+
+# 这是 prod 模式打包
+npm run build:prod
+```
+
 ## 项目需求
 
 - [x] 刮削游戏 (后端部分)

package.json

@@ -3,7 +3,10 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:dev": "vite",
+    "dev:prod": "vite",
     "build": "vite build",
+    "build:prod": "vite build",
     "serve": "vite preview"
   },
   "devDependencies": {
@@ -14,6 +17,7 @@
     "postcss": "^8",
     "svelte": "^3",
     "tailwindcss": "^3",
-    "vite": "^4"
+    "vite": "^4",
+    "vite-plugin-env-command": "^1.0.8"
   }
 }

src/App.svelte

 <script>
   import { onMount } from 'svelte';
-  import { _theme } from './stores';
+  import { _theme, _env } from './stores';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
   import Content from './Content.svelte';
 
@@ -91,6 +91,20 @@
     }
   ];
 
+  // FIXME: 环境变量 -> 处理生产模式和开发模式的文件网络路径问题
+  console.log('环境变量:\t', process.env.APP_ENV);
+  switch (process.env.APP_ENV) {
+    case 'dev':
+      $_env = '/api'
+      // console.log(0 + 'dev');
+
+      break;
+    case 'prod':
+    $_env = ''
+      // console.log(1 + 'prod');
+      break;
+  }
+
   onMount(() => {
     // 1. 读取 localstorage
     // -- 1.1. 读取 theme

src/Content.svelte

 <script>
   import Card from './components/card.svelte';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
+  import { _env } from './stores';
 
   // -----------------------------
   let List = [];
 
   /**获取所有资料*/
   const getContents = {
-    url: '/api/query.php?action=get',
+    url: `${$_env}/query.php?action=get`,
     params: {
       method: 'GET',
       headers: {
@@ -62,7 +63,7 @@
     <Card
       title={item.cn_name}
       sub_title={item.jp_name}
-      cover={'/api' + item.folder + '/rpg_info/1.jpg' ?? ''}
+      cover={$_env + item.folder + '/rpg_info/1.jpg' ?? ''}
       language={item.category}
       raw_tags={item.tags}
     />

src/stores/index.js

@@ -34,4 +34,7 @@ function persistStore(key, startValue) {
 
 // 变量 -------------------------------------
 /** 主题 */
-export const _theme = persistStore('_theme', "light");
\ No newline at end of file
+export const _theme = persistStore('_theme', "light");
+
+/** 环境变量 */
+export const _env = persistStore('_env', "");
\ No newline at end of file

test.http

+### get
+GET http://192.168.31.103:25702/query.php
+
+### 
+GET http://192.168.31.103:25702/query.php?action=get
+
+### 
+GET http://192.168.31.103:25702/query.php?action=get_category
\ No newline at end of file

vite.config.js

 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
+import SetEnvByCommandArg, { getCommandArgv } from 'vite-plugin-env-command';
+
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()],
+  plugins: [
+    svelte(),
+    SetEnvByCommandArg({
+      key: "APP_ENV",
+    }),
+  ],
+  server: {
+    proxy: {
+      "/api/": {
+        target: "http://192.168.31.103:25702",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
 });