From fe7f021ddbfec5ca44480353f4c35c20866d21ba Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Mon, 19 Jun 2023 11:09:23 +0800
Subject: [PATCH] feat: admin login page is ready

---
 api/go/handler/admin/admin_handler.go |   8 +-
 api/go/main.go                        |   1 +
 api/go/utils/user.go                  |   2 +-
 web/.env.production                   |   1 +
 web/src/actions/chat.js               |   3 -
 web/src/main.js                       |   3 +-
 web/src/utils/storage.js              |  14 +-
 web/src/views/ChatPlus.vue            |  45 ++-
 web/src/views/admin/Admin.vue         | 498 +++++++++++---------------
 web/src/views/admin/Login.vue         |   2 +-
 web/src/views/admin/Welcome.vue       |  22 +-
 web/vue.config.js                     |  11 +-
 12 files changed, 266 insertions(+), 344 deletions(-)
 delete mode 100644 web/src/actions/chat.js

diff --git a/api/go/handler/admin/admin_handler.go b/api/go/handler/admin/admin_handler.go
index c4fa0e0d..a59cad56 100644
--- a/api/go/handler/admin/admin_handler.go
+++ b/api/go/handler/admin/admin_handler.go
@@ -5,6 +5,7 @@ import (
 	"chatplus/core/types"
 	"chatplus/handler"
 	logger2 "chatplus/logger"
+	"chatplus/utils"
 	"chatplus/utils/resp"
 
 	"github.com/gin-contrib/sessions"
@@ -35,7 +36,12 @@ func (h *ManagerHandler) Login(c *gin.Context) {
 	}
 	manager := h.App.AppConfig.Manager
 	if data.Username == manager.Username && data.Password == manager.Password {
-		manager.Password = "" // 清空密码
+		err := utils.SetLoginAdmin(c, manager)
+		if err != nil {
+			resp.ERROR(c, "Save session failed")
+			return
+		}
+		manager.Password = "" // 清空密码]
 		resp.SUCCESS(c, manager)
 	} else {
 		resp.ERROR(c, "用户名或者密码错误")
diff --git a/api/go/main.go b/api/go/main.go
index a163f94d..f7785dfb 100644
--- a/api/go/main.go
+++ b/api/go/main.go
@@ -128,6 +128,7 @@ func main() {
 			group := s.Engine.Group("/api/admin/")
 			group.POST("login", h.Login)
 			group.GET("logout", h.Logout)
+			group.GET("session", h.Session)
 		}),
 		fx.Invoke(func(s *core.AppServer, h *admin.ApiKeyHandler) {
 			group := s.Engine.Group("/api/admin/apikey/")
diff --git a/api/go/utils/user.go b/api/go/utils/user.go
index 25dcfe03..41cf3e0b 100644
--- a/api/go/utils/user.go
+++ b/api/go/utils/user.go
@@ -19,7 +19,7 @@ func SetLoginUser(c *gin.Context, user model.User) error {
 
 func SetLoginAdmin(c *gin.Context, admin types.Manager) error {
 	session := sessions.Default(c)
-	session.Set(types.SessionAdmin, admin)
+	session.Set(types.SessionAdmin, admin.Username)
 	return session.Save()
 }
 
diff --git a/web/.env.production b/web/.env.production
index 87a04a4d..1ab0ff38 100644
--- a/web/.env.production
+++ b/web/.env.production
@@ -1,2 +1,3 @@
 VUE_APP_API_HOST=
 VUE_APP_WS_HOST=
+VUE_APP_BASE_URL=
diff --git a/web/src/actions/chat.js b/web/src/actions/chat.js
deleted file mode 100644
index db214e64..00000000
--- a/web/src/actions/chat.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/**
- * actions for chat page
- */
\ No newline at end of file
diff --git a/web/src/main.js b/web/src/main.js
index a8fa9b41..18787504 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -18,11 +18,12 @@ const routes = [
     {name: 'register', path: '/register', component: Register, meta: {title: '用户注册'}},
     {name: 'plus', path: '/chat', component: ChatPlus, meta: {title: 'ChatGPT-智能助手V3'}},
     {name: 'admin', path: '/admin', component: Admin, meta: {title: 'Chat-Plus 控制台'}},
-    {name: 'admin/login', path: '/admin/login', component: AdminLogin, meta: {title: 'Chat-Plus 控制台登录'}},
+    {name: 'admin-login', path: '/admin/login', component: AdminLogin, meta: {title: 'Chat-Plus 控制台登录'}},
     {name: 'test', path: '/test', component: TestPage, meta: {title: '测试页面'}},
     {name: 'NotFound', path: '/:all(.*)', component: NotFound, meta: {title: '页面没有找到'}},
 ]
 
+// console.log(MY_VARIABLE)
 const router = createRouter({
     history: createWebHistory(),
     routes: routes,
diff --git a/web/src/utils/storage.js b/web/src/utils/storage.js
index 7aa7e815..866dff6b 100644
--- a/web/src/utils/storage.js
+++ b/web/src/utils/storage.js
@@ -5,20 +5,14 @@
  */
 
 const SessionUserKey = 'LOGIN_USER';
-const SessionAdminKey = 'LOGIN_ADMIN';
 
 export function getSessionId() {
     const user = getLoginUser();
     return user ? user['session_id'] : '';
 }
 
-export function getLoginAdmin() {
-    const value = sessionStorage.getItem(SessionAdminKey);
-    if (value) {
-        return JSON.parse(value);
-    } else {
-        return null;
-    }
+export function removeLoginUser() {
+    sessionStorage.removeItem(SessionUserKey)
 }
 
 export function getLoginUser() {
@@ -33,7 +27,3 @@ export function getLoginUser() {
 export function setLoginUser(user) {
     sessionStorage.setItem(SessionUserKey, JSON.stringify(user))
 }
-
-export function setLoginAdmin(admin) {
-    sessionStorage.setItem(SessionAdminKey, JSON.stringify(admin))
-}
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index 2bd04040..f9620b90 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -183,9 +183,9 @@
       </el-main>
     </el-container>
 
-    <config-dialog :show="showConfigDialog" :models="models" @hide="showConfigDialog = false"
+    <config-dialog v-if="user" :show="showConfigDialog" :models="models" @hide="showConfigDialog = false"
                    @update-user="updateUser"/>
-    <password-dialog :show="showPasswordDialog" @hide="showPasswordDialog = false" @logout="logout"/>
+    <password-dialog v-if="user" :show="showPasswordDialog" @hide="showPasswordDialog = false" @logout="logout"/>
   </div>
 
 
@@ -200,7 +200,6 @@ import {
   Close,
   Delete,
   Edit,
-  Monitor,
   Plus, Promotion,
   RefreshRight,
   Search,
@@ -211,7 +210,7 @@ import 'highlight.js/styles/a11y-dark.css'
 import {dateFormat, randString, removeArrayItem, renderInputText, UUID} from "@/utils/libs";
 import {ElMessage, ElMessageBox} from "element-plus";
 import hl from "highlight.js";
-import {getLoginUser, getSessionId} from "@/utils/storage";
+import {getLoginUser, getSessionId, removeLoginUser} from "@/utils/storage";
 import {httpGet, httpPost} from "@/utils/http";
 import {useRouter} from "vue-router";
 import Clipboard from "clipboard";
@@ -269,15 +268,15 @@ if (!user.value) {
       ElMessage.error('复制失败！');
     })
   });
-}
 
-// 加载系统配置
-httpGet('/api/config/get?key=system').then(res => {
-  title.value = res.data.title;
-  models.value = res.data.models;
-}).catch(e => {
-  ElMessage.error("加载系统配置失败: " + e.message)
-})
+  // 加载系统配置
+  httpGet('/api/config/get?key=system').then(res => {
+    title.value = res.data.title;
+    models.value = res.data.models;
+  }).catch(e => {
+    ElMessage.error("加载系统配置失败: " + e.message)
+  })
+}
 
 const checkSession = function () {
   return new Promise((resolve, reject) => {
@@ -631,6 +630,7 @@ const clearAllChats = function () {
 const logout = function () {
   activelyClose.value = true;
   httpGet('/api/user/logout').then(() => {
+    removeLoginUser();
     router.push('login');
   }).catch(() => {
     ElMessage.error('注销失败！');
@@ -720,8 +720,10 @@ const updateUser = function (data) {
 }
 </script>
 
-<style lang="stylus">
+<style scoped lang="stylus">
 @import '@/assets/iconfont/iconfont.css';
+$sideBgColor = #252526;
+$borderColor = #4676d0;
 #app {
   height: 100%;
 
@@ -729,8 +731,8 @@ const updateUser = function (data) {
     height: 100%;
 
     // left side
-
     .el-aside {
+      background-color: $sideBgColor;
       .title-box {
         padding: 6px 10px;
         display: flex;
@@ -859,19 +861,14 @@ const updateUser = function (data) {
               display flex
 
               .el-image {
-                display flex
-
-                img {
-                  width: 20px;
-                  height: 20px;
-                  border-radius: 5px;
-                }
+                width: 20px;
+                height: 20px;
+                border-radius: 5px;
               }
 
-
               .username {
                 display flex
-                line-height 24px;
+                line-height 22px;
                 width 230px;
                 padding-left 10px;
 
@@ -890,6 +887,8 @@ const updateUser = function (data) {
 
     .el-main {
       overflow: hidden;
+      --el-main-padding: 0;
+      margin: 0;
 
       .chat-head {
         width: 100%;
diff --git a/web/src/views/admin/Admin.vue b/web/src/views/admin/Admin.vue
index 165bb8c4..d4f59d08 100644
--- a/web/src/views/admin/Admin.vue
+++ b/web/src/views/admin/Admin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="common-layout">
+  <div class="admin-body common-layout">
     <el-container>
       <el-container>
         <el-aside
@@ -13,7 +13,7 @@
             <span class="text">{{ title }}</span>
             <span
                 class="fold"
-                @click="hideSidebar()"
+                @click="showSidebar = !showSidebar"
                 :style="{ right: foldIconRight + 'px' }"
             >
               <el-icon>
@@ -44,8 +44,16 @@
             </li>
           </ul>
 
-          <el-row class="tool-box">
-            <el-button type="primary" plain @click="logout" v-show="isLogin">退出登录</el-button>
+          <el-row class="nav-footer">
+            <div class="source">
+              <i class="iconfont icon-github"></i>
+              <el-link href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">ChatGPT-Plus-V3</el-link>
+            </div>
+
+            <div class="logout" @click="logout">
+              <i class="iconfont icon-logout"></i>
+              <span>退出登录</span>
+            </div>
           </el-row>
         </el-aside>
 
@@ -80,47 +88,13 @@
             </div>
           </div>
         </el-main>
-
-        <el-dialog
-            v-model="showDialog"
-            title="管理后台登录"
-            width="30%"
-            :destroy-on-close="true"
-        >
-          <el-form :model="user" label-width="80px">
-            <el-form-item label="用户名：">
-              <el-input
-                  v-model.trim="user.username"
-                  autocomplete="off"
-                  placeholder="请输入用户名"
-              />
-            </el-form-item>
-
-            <el-form-item label="密码：">
-              <el-input
-                  v-model.trim="user.password"
-                  autocomplete="off"
-                  type="password"
-                  placeholder="请输入密码"
-                  @keyup="loginInputKeyup"
-              />
-            </el-form-item>
-          </el-form>
-
-          <template #footer>
-            <span class="dialog-footer">
-              <el-button @click="showDialog = false">取消</el-button>
-              <el-button type="primary" @click="login">提交</el-button>
-            </span>
-          </template>
-        </el-dialog>
       </el-container>
     </el-container>
   </div>
 </template>
 
-<script>
-import {defineComponent} from 'vue'
+<script setup>
+import {computed, defineComponent, onMounted, ref} from 'vue'
 import {Fold, Menu} from "@element-plus/icons-vue"
 import XWelcome from "@/views/admin/Welcome.vue";
 import SysConfig from "@/views/admin/SysConfig.vue";
@@ -130,267 +104,233 @@ import RoleList from "@/views/admin/RoleList.vue";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {setLoginUser} from "@/utils/storage";
+import {useRouter} from "vue-router";
 
-
-export default defineComponent({
-  name: "XAdmin",
-  components: {RoleList, UserList, SysConfig, XWelcome, Fold, Menu},
-  data() {
-    return {
-      title: "Chat-Plus 控制台",
-      logo: 'images/logo.png',
-      user: {},
-      navs: [
-        {
-          id: 1,
-          title: '系统配置',
-          tab: 'config',
-          active: false,
-        },
-        {
-          id: 2,
-          title: '口令管理',
-          tab: 'user',
-          active: false,
-        },
-        {
-          id: 3,
-          title: '角色管理',
-          tab: 'role',
-          active: false,
-        }
-      ],
-
-      curNav: null,
-      curTab: 'welcome',
-      tabs: [],
-      isLogin: false,
-
-      showDialog: false,
-
-      // window height
-      winHeight: window.innerHeight,
-      showSidebar: true
-    }
+const title = ref('Chat-Plus 控制台')
+const logo = ref('images/logo.png')
+const user = ref({})
+const navs = ref([
+  {
+    id: 1,
+    title: '系统配置',
+    tab: 'config',
+    active: false,
   },
-
-  computed: {
-    sideWidth: function () {
-      return this.showSidebar ? 250 : 30
-    },
-
-    foldIconRight: function () {
-      return this.showSidebar ? 3 : 0
-    },
-
-    nodeListPaddingLeft: function () {
-      return this.showSidebar ? 20 : 5
-    }
-  },
-
-  mounted: function () {
-    // bind window resize event
-    window.addEventListener("resize", function () {
-      this.winHeight = window.innerHeight
-    })
-    this.checkSession()
-  },
-
-  methods: {
-    checkSession: function () {
-      httpGet("/api/session/get").then(() => {
-        this.isLogin = true
-      }).catch(() => {
-        this.showDialog = true
-      })
-    },
-
-    // 登录输入框输入事件处理
-    loginInputKeyup: function (e) {
-      if (e.keyCode === 13) {
-        this.login();
-      }
-    },
-
-    // 登录
-    login: function () {
-      if (!this.user.username || !this.user.password) {
-        ElMessage.error('请输入用户名和密码')
-        return
-      }
-      httpPost('/api/admin/login', this.user).then((res) => {
-        setLoginUser(res.data)
-        this.showDialog = false
-        this.isLogin = true
-        this.user = {}
-      }).catch((e) => {
-        ElMessage.error('登录失败，' + e.message)
-      })
-    },
-
-    logout: function () {
-      httpPost("/api/logout", {opt: "logout"}).then(() => {
-        this.checkSession();
-        this.isLogin = false
-      }).catch(() => {
-        ElMessage.error("注销失败");
-      })
-    },
-
-    arrayContains(array, value, compare) {
-      return arrayContains(array, value, compare);
-    },
-
-    hideSidebar: function () {
-      this.showSidebar = !this.showSidebar
-    },
-
-    // 添加 tab 窗口
-    addTab: function (nav) {
-      if (this.curNav) {
-        this.curNav.active = false
-      }
-      this.curNav = nav;
-      this.curNav.active = true;
-      this.curTab = nav.tab;
-      if (!arrayContains(this.tabs, nav.tab)) {
-        this.tabs.push(nav.tab);
-      }
-    },
-
-    changeTab: function (name) {
-      for (let i = 0; i < this.navs.length; i++) {
-        if (this.navs[i].tab === name) {
-          this.curNav.active = false
-          this.curNav = this.navs[i];
-          this.curNav.active = true;
-          break;
-        }
-      }
-    },
-
-    // 删除 tab 窗口
-    removeTab: function (name) {
-      this.tabs = removeArrayItem(this.tabs, name);
-      if (this.tabs.length === 0) {
-        this.curTab = 'welcome';
-        return;
-      }
-
-      for (let i = 0; i < this.navs.length; i++) {
-        if (this.navs[i].tab === this.tabs[this.tabs.length - 1]) {
-          this.addTab(this.navs[i]);
-        }
-      }
-
-    }
+  {
+    id: 2,
+    title: '口令管理',
+    tab: 'user',
+    active: false,
   },
+  {
+    id: 3,
+    title: '角色管理',
+    tab: 'role',
+    active: false,
+  }
+])
+const tabs= ref([])
+const curNav = ref(null)
+const curTab = ref('welcome')
+const winHeight = ref(window.innerHeight)
+const showSidebar = ref(true)
 
+const sideWidth = computed(() =>{
+  return showSidebar.value ? 250 : 30
 })
+const foldIconRight = computed(() =>{
+  return showSidebar.value ? 3 : 0
+})
+const nodeListPaddingLeft = computed(() =>{
+  return showSidebar.value ?  20 : 5
+})
+const router = useRouter()
+
+onMounted(() => {
+  window.addEventListener("resize", function () {
+    winHeight.value = window.innerHeight
+  })
+
+  httpGet("/api/admin/session").catch(() => {
+   router.push('/admin/login')
+  })
+})
+
+const logout = function () {
+  httpGet("/api/admin/logout").then(() => {
+    router.push('/admin/login')
+  }).catch((e) => {
+    ElMessage.error("注销失败: "+ e.message);
+  })
+}
+
+// 添加 tab 窗口
+const addTab= function (nav) {
+  if (curNav.value) {
+    curNav.value.active = false
+  }
+  nav.active = true
+  curNav.value = nav;
+  curTab.value = nav.tab;
+  if (!arrayContains(tabs.value, nav.tab)) {
+    this.tabs.push(nav.tab);
+  }
+}
+
+// 切换 tab 窗口
+const changeTab= function (name) {
+  for (let i = 0; i < navs.value.length; i++) {
+    let _nav = navs.value[i]
+    if (_nav.tab === name) {
+      curNav.value.active = false // 取消上一个 active 窗口的激活状态
+      _nav.active = true
+      curNav.value = _nav;
+      break;
+    }
+  }
+}
+
+// 删除 tab 窗口
+const removeTab= function (name) {
+  tabs.value = removeArrayItem(tabs.value, name);
+  if (tabs.value.length === 0) {
+    curTab.value = 'welcome';
+    return;
+  }
+
+  for (let i = 0; i < navs.value.length; i++) {
+    if (navs.value[i].tab === tabs.value[tabs.value.length - 1]) {
+      addTab(navs.value[i]);
+    }
+  }
+
+}
 </script>
 
-<style lang="stylus">
+<style scoped lang="stylus">
 $sideBgColor = #252526;
 $borderColor = #4676d0;
-.el-aside {
-  background-color: $sideBgColor;
+.admin-body {
+  .el-aside {
+    background-color: $sideBgColor;
 
-  .title {
-    text-align: center;
-    line-height: 60px;
-    color: #fff;
-    font-size: 20px;
-    border-bottom: 2px solid #333841;
-    display flex
-    flex-direction row
+    .title {
+      text-align: center;
+      line-height: 60px;
+      color: #fff;
+      font-size: 20px;
+      border-bottom: 2px solid #333841;
+      display flex
+      flex-direction row
 
-    .logo {
-      background-color #ffffff
-      border-radius 50%;
-      width 32px;
-      height 32px;
-      margin: 12px 5px 0 5px;
-    }
+      .logo {
+        background-color #ffffff
+        border-radius 50%;
+        width 32px;
+        height 32px;
+        margin: 12px 5px 0 5px;
+      }
 
-    .fold {
-      cursor: pointer;
-      position: relative;
-      top: 2px;
-      margin-left 10px;
-    }
-  }
-
-  .title.hide {
-    .text {
-      display none
-    }
-
-    .logo {
-      display none
-    }
-
-    .fold {
-      margin-left 5px;
-    }
-  }
-
-  .nav-list {
-    list-style: none;
-    position: relative;
-    margin: 0;
-    padding-left: 0;
-    text-align: left;
-
-    li {
-      line-height: 40px;
-      color: #aaa;
-      font-size: 14px;
-      cursor: pointer;
-      padding: 0 10px 0 10px;
-      border-bottom: 1px dashed #333841;
-
-      i {
-        margin-right: 6px;
+      .fold {
+        cursor: pointer;
         position: relative;
-        top: 1px;
-      }
-
-      .delete {
-        float: right;
+        top: 2px;
+        margin-left 10px;
       }
     }
 
-    li.active {
-      background-color: #363535
+    .title.hide {
+      .text {
+        display none
+      }
+
+      .logo {
+        display none
+      }
+
+      .fold {
+        margin-left 5px;
+      }
+    }
+
+    .nav-list {
+      list-style: none;
+      position: relative;
+      margin: 0;
+      padding-left: 0;
+      text-align: left;
+
+      li {
+        line-height: 40px;
+        color: #ffffff;
+        font-size: 14px;
+        cursor: pointer;
+        padding: 0 10px 0 10px;
+        border-bottom: 1px dashed #333841;
+
+        i {
+          margin-right: 6px;
+          position: relative;
+          top: 1px;
+        }
+
+        .delete {
+          float: right;
+        }
+      }
+
+      li.active {
+        background-color: #363535
+      }
+    }
+
+    .nav-footer {
+      flex-direction column
+      div {
+        padding 10px 20px;
+        font-size 14px;
+        color #aaaaaa
+
+        .el-link {
+          color #aaaaaa
+        }
+
+        .iconfont {
+          margin-right 5px
+          position relative
+          top 1px
+        }
+      }
+
+      .logout {
+        cursor pointer
+      }
     }
   }
 
-  .tool-box {
-    display flex
-    justify-content center
-    padding 10px 20px;
+  .el-main {
+    --el-main-padding: 0;
+    margin: 0;
+    background-image url("~@/assets/img/bg_01.jpeg")
+
+    .main-container {
+      display: flex;
+      flex-flow: column;
+
+      .content-tabs {
+        background: #ffffff;
+        padding 10px 20px;
+
+        .el-tabs__item {
+          height 35px
+          line-height 35px
+        }
+      }
+
+    }
   }
 }
 
-.el-main {
-  --el-main-padding: 0;
-  margin: 0;
-  background-image url("~@/assets/img/bg_01.jpeg")
 
-  .main-container {
-    display: flex;
-    flex-flow: column;
 
-    .content-tabs {
-      background: #ffffff;
-      padding 10px 20px;
-
-      .el-tabs__item {
-        height 35px
-        line-height 35px
-      }
-    }
-
-  }
-}
 </style>
diff --git a/web/src/views/admin/Login.vue b/web/src/views/admin/Login.vue
index dc5815c4..ebcb73e6 100644
--- a/web/src/views/admin/Login.vue
+++ b/web/src/views/admin/Login.vue
@@ -75,7 +75,7 @@ const login = function () {
 
   httpPost('/api/admin/login', {username: username.value.trim(), password: password.value.trim()}).then((res) => {
     setLoginUser(res.data)
-    router.push("admin")
+    router.push("/admin")
   }).catch((e) => {
     ElMessage.error('登录失败，' + e.message)
   })
diff --git a/web/src/views/admin/Welcome.vue b/web/src/views/admin/Welcome.vue
index d1644d9a..0480371d 100644
--- a/web/src/views/admin/Welcome.vue
+++ b/web/src/views/admin/Welcome.vue
@@ -4,22 +4,14 @@
   </div>
 </template>
 
-<script>
-import {defineComponent} from "vue"
+<script setup>
+import {defineComponent, onMounted, ref} from "vue"
 
-export default defineComponent({
-  name: 'XWelcome',
-  data() {
-    return {
-      winHeight: window.innerHeight,
-    }
-  },
-  mounted: function () {
-    const that = this
-    window.addEventListener("resize", function () {
-      that.winHeight = window.innerHeight
-    })
-  }
+const winHeight = ref(window.innerHeight)
+onMounted(() => {
+  window.addEventListener("resize", function () {
+    winHeight.value = window.innerHeight
+  })
 })
 </script>
 
diff --git a/web/vue.config.js b/web/vue.config.js
index de05755e..8bcbe491 100644
--- a/web/vue.config.js
+++ b/web/vue.config.js
@@ -10,16 +10,11 @@ module.exports = defineConfig({
         },
         plugins: [
             new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})
-        ],
-        // resolve: {
-        //     fallback: {
-        //         fs: false,
-        //         path: require.resolve('path-browserify')
-        //     }
-        // }
+        ]
     },
 
-    publicPath: '/',
+    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
+
     outputDir: 'dist',
     crossorigin: "anonymous",
     devServer: {