로컬, 개발 실행설정 변경

.env.dev

@@ -1,6 +1,6 @@
-VITE_DOMAIN = http://localhost:5173/
+VITE_DOMAIN = https://192.168.0.251:5173/
 # VITE_LOGIN_URL = http://localhost:10325/ms/
 # VITE_FILE_URL = http://localhost:10325/ms/
-# VITE_API_URL = http://localhost:10325/api/
+VITE_API_URL = https://192.168.0.251:10325/api/
-VITE_API_URL = http://localhost:10325/test/
+VITE_TEST_URL = https://192.168.0.251:10325/test/
 VITE_KAKAO_MAP_KEY=6f092e8f45ee81186bb6d8408f66a492

.env.mine

@@ -0,0 +1,6 @@
+VITE_DOMAIN = http://localhost:5173/
+# VITE_LOGIN_URL = http://localhost:10325/ms/
+# VITE_FILE_URL = http://localhost:10325/ms/
+VITE_API_URL = http://localhost:10325/api/
+VITE_TEST_URL = http://localhost:10325/test/
+VITE_KAKAO_MAP_KEY=6f092e8f45ee81186bb6d8408f66a492

package.json

@@ -5,6 +5,7 @@
     "type": "module",
     "scripts": {
         "dev": "vite --host 0.0.0.0 --mode dev",
+        "mine": "vite --host 0.0.0.0 --mode mine",
         "build": "vite build --mode prod",
         "preview": "vite preview",
         "lint": "eslint . --fix",

src/common/axios-interceptor.js

@@ -3,7 +3,7 @@ import { useRoute } from 'vue-router';
 import { useToastStore } from '@s/toastStore';
 
 const $api = axios.create({
-    baseURL: 'https://192.168.0.251:10325/api/',
+    baseURL: import.meta.env.VITE_API_URL,
     timeout: 300000,
     withCredentials: true,
 });

src/layouts/TheTop.vue

@@ -8,9 +8,8 @@
 
         <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
             <ul class="navbar-nav flex-row align-items-center ms-auto">
-
+                <button class="btn p-1" @click="switchToLightMode"><i class="bx bxs-sun link-warning"></i></button>
-                <button class="btn p-1" @click="switchToLightMode"><i class='bx bxs-sun link-warning'></i></button>
+                <button class="btn p-1" @click="switchToDarkMode"><i class="bx bxs-moon"></i></button>
-                <button class="btn p-1" @click="switchToDarkMode"><i class='bx bxs-moon' ></i></button>
 
                 <i class="bx bx-bell bx-md bx-log-out cursor-pointer p-1" @click="handleLogout"></i>
 
@@ -152,7 +151,13 @@
                 <!-- User -->
                 <li class="nav-item navbar-dropdown dropdown-user dropdown">
                     <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
-                        <img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-px-40 rounded-circle" @error="$event.target.src = '/img/icons/icon.png'"/>
+                        <img
+                            v-if="user"
+                            :src="`${baseUrl}upload/img/profile/${user.profile}`"
+                            alt="Profile Image"
+                            class="w-px-40 h-px-40 rounded-circle"
+                            @error="$event.target.src = '/img/icons/icon.png'"
+                        />
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end">
                         <li>
@@ -235,7 +240,8 @@ import { onMounted, ref } from 'vue';
     import $api from '@api';
 
     const user = ref(null);
-const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+    //const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+    const baseUrl = import.meta.env.BASE_URL;
 
     const authStore = useAuthStore();
     const userStore = useUserInfoStore();
@@ -254,13 +260,9 @@ onMounted(async () => {
         user.value = userStore.user;
     });
 
-
-
     const handleLogout = async () => {
         await authStore.logout();
         router.push('/login');
     };
-
-
 </script>
 <style></style>

vite.config.js

@@ -5,17 +5,22 @@ import vueDevTools from 'vite-plugin-vue-devtools';
 import mkcert from 'vite-plugin-mkcert';
 
 // https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-    plugins: [
+    const plugins = [vue(), vueDevTools()];
-        vue(),
+
-        vueDevTools(),
+    // dev: https, mine: http
-        // 자신의 로컬 서버에 연결하려면 이부분 주석처리
+    if (mode === 'dev') {
+        plugins.push(
             mkcert({
                 // SSL 키 등록
                 keyFile: '/localhost-key.pem',
                 certFile: '/localhost.pem',
             }),
-    ],
+        );
+    }
+
+    return {
+        plugins,
         resolve: {
             alias: {
                 '@': fileURLToPath(new URL('./src', import.meta.url)),
@@ -28,4 +33,5 @@ export default defineConfig({
                 '@api': fileURLToPath(new URL('./src/common/axios-interceptor.js', import.meta.url)),
             },
         },
+    };
 });