添加.env 和dev env环境

qq516249940 · Oct 30, 2022 · bd9c9fd · bd9c9fd
1 parent f1196e6
commit bd9c9fd
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,4 @@
+VITE_SOME_KEY=123
+DB_PASSWORD=foobar
+BASE_URL="https://foo.com/"
+VITE_APP_BASE_URL=/hi/
diff --git a/.env.development b/.env.development
@@ -0,0 +1,7 @@
+VITE_SOME_KEY=123dev
+DB_PASSWORD=foobar
+BASE_URL=/www/
+VITE_APP_BASE_URL=$DB_PASSWORD/hidev/
+base=/AAA/
+BASE_ROUTER_URL=/AAA/
+VITE_APP_BASE_API = '/dev-api'
diff --git a/README.md b/README.md
@@ -32,7 +32,10 @@ mock
 pass:
 UC^#01pM2OBb
 
-# django后台帐号密码
+## django后台帐号密码
 admin:admin
 ```
-本demo配合rear_end python3 django4.1后端
+本demo配合rear_end python3 django4.1后端
+
+## 多环境配置读取
+当要读取在 .env.development中配置的变量时，需要确定 vite --mode development的 mode参数为 development
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "front_end",
   "version": "0.0.1",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --mode development",
     "build": "vite build",
     "preview": "vite preview"
   },

diff --git a/src/components/TestApi.vue b/src/components/TestApi.vue
@@ -40,6 +40,10 @@ export default {
   },
   methods: {
     onSubmitGet() {
+      console.log(import.meta.env.VITE_SOME_KEY); // 123
+      console.log(import.meta.env.DB_PASSWORD); // undefined
+      console.log(import.meta.env.BASE_URL); // 查看BASE_URL 默认是/
+      console.log(import.meta.env); 
       console.log("submit! get");
       axios.get("users.json")
       .then((res) => {