add Drive switch and Optimize page

README.md

@@ -1,24 +1,50 @@
-# go2index-theme-acrou
+![GoIndex](https://raw.githubusercontent.com/donwa/goindex/master/themes/logo.png)  
 
-## Project setup
+# GoIndex-theme-acrou
-```
-npm install
-```
 
-### Compiles and hot-reloads for development
+[README](README.md) | [中文文档](README_zh.md)
-```
-npm run serve
-```
 
-### Compiles and minifies for production
+## Demo  
-```
-npm run build
-```
 
-### Lints and fixes files
+Acrou: [https://oss.achirou.workers.dev/](https://oss.achirou.workers.dev/) 
-```
-npm run lint
-```
 
-### Customize configuration
+## Use
-See [Configuration Reference](https://cli.vuejs.org/config/).
+
+The theme files can be downloaded from the dist directory and uploaded to your own CDN or you can use the link below.
+
+Modify the app.js used in index.js of goindex to (https://cdn.jsdelivr.net/gh/Aicirou/goindex-theme-acrou/dist/app.mini.js).
+
+The goindex author's `index.js` does not support search. Use this [index.js](https://oss.achirou.workers.dev/go2index/index.js?a=view) if you need a search function.
+
+## TODO
+
+- [x] Drive switch
+- [ ] Pagination display
+- [ ] Picture list display
+- [ ] More file format preview
+
+GoIndex  
+====
+
+Google Drive Directory Index  
+Combining the power of [Cloudflare Workers](https://workers.cloudflare.com/) and [Google Drive](https://www.google.com/drive/) will allow you to index you files on the browser on Cloudflare Workers.    
+
+[index.js](https://github.com/donwa/goindex/) is the content of the Workers script.  
+
+## Deployment  
+1.Install `rclone` software locally  
+2.Follow [https://rclone.org/drive/]( https://rclone.org/drive/) bind a drive  
+3.Execute the command`rclone config file` to find the file `rclone.conf` path  
+4.Open `rclone.conf`,find the configuration `root_folder_id` and `refresh_token`  
+5.Download index.js in https://github.com/donwa/goindex and fill in root and refresh_token  
+6.Deploy the code to [Cloudflare Workers](https://www.cloudflare.com/)
+
+## Quick Deployment  
+1.Open https://installen.gd.workers.dev/  
+2.Auth and get the code  
+3.Deploy the code to [Cloudflare Workers](https://www.cloudflare.com/)  
+
+
+
+## About  
+Cloudflare Workers allow you to write JavaScript which runs on all of Cloudflare's 150+ global data centers.  

README_zh.md

@@ -0,0 +1,53 @@
+![GoIndex](https://raw.githubusercontent.com/donwa/goindex/master/themes/logo.png)  
+
+# GoIndex-theme-acrou
+
+[README](README.md) | [中文文档](README_zh.md)
+
+## 预览  
+
+Acrou: [https://oss.achirou.workers.dev/](https://oss.achirou.workers.dev/) 
+
+## 使用
+
+主题文件在dist目录可以下载下来上传到自己cdn或者使用下面的链接也可以
+
+修改goindex的index.js中所使用的app.js为(https://cdn.jsdelivr.net/gh/Aicirou/goindex-theme-acrou/dist/app.mini.js)
+
+goindex作者的`index.js`不支持搜索，需要搜索功能请使用[index.js](https://oss.achirou.workers.dev/go2index/index.js?a=view)
+
+## 即将支持
+
+- [x] 多盘切换
+- [ ] 分页显示
+- [ ] 图片列表显示
+- [ ] 更多文件格式预览
+
+GoIndex  
+====
+
+Google Drive Directory Index  
+Combining the power of [Cloudflare Workers](https://workers.cloudflare.com/) and [Google Drive](https://www.google.com/drive/) will allow you to index you files on the browser on Cloudflare Workers.    
+
+[index.js](https://github.com/donwa/goindex/) is the content of the Workers script.  
+
+## Deployment  
+
+1.Install `rclone` software locally  
+2.Follow [https://rclone.org/drive/]( https://rclone.org/drive/) bind a drive  
+3.Execute the command`rclone config file` to find the file `rclone.conf` path  
+4.Open `rclone.conf`,find the configuration `root_folder_id` and `refresh_token`  
+5.Download index.js in https://github.com/donwa/goindex and fill in root and refresh_token  
+6.Deploy the code to [Cloudflare Workers](https://www.cloudflare.com/)
+
+## Quick Deployment  
+
+1.Open https://installen.gd.workers.dev/  
+2.Auth and get the code  
+3.Deploy the code to [Cloudflare Workers](https://www.cloudflare.com/)  
+
+
+
+## About  
+
+Cloudflare Workers allow you to write JavaScript which runs on all of Cloudflare's 150+ global data centers.  

public/index.html

@@ -1,33 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var authConfig = {
+        roots: [
+          {
+            id: "0AEofxddwF4bAUk9PVA",
+            name: "TeamDrive",
+            pass: "",
+          },
+          {
+            id: "root",
+            name: "PriveDrive",
+            pass: "",
+          },
+        ],
+      };
+      window.gds = JSON.parse(
+        JSON.stringify(authConfig.roots.map((it) => it.name))
+      );
+      // window.MODEL = { q: "the" };
+    </script>
+  </head>
 
-<head>
+  <body>
-  <meta charset="utf-8">
+    <div id="app"></div>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  </body>
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title><%= htmlWebpackPlugin.options.title %></title>
-  <script>
-    var authConfig = {
-      roots: [
-        {
-          id: "team",
-          name: "TeamDrive",
-          pass: "",
-        },
-        {
-          id: "root",
-          name: "PriveDrive",
-          pass: "",
-        }
-      ],
-    };
-    window.gds = JSON.parse(JSON.stringify(authConfig.roots.map(it => it.name)));
-  </script>
-</head>
-
-<body>
-  <div id="app"></div>
-</body>
-
 </html>

src/App.vue

@@ -5,33 +5,25 @@
 </template>
 
 <script>
-import Layout from './view/Layout'
+import Layout from "./view/Layout";
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
     Layout
   },
-  data: function () {
+  data: function() {
     return {
       config: {
         siteName: "",
         title: "",
-        path: "",
+        path: ""
       }
-    }
+    };
   },
-  mounted () {
+  mounted() {
-    let favicon = document.createElement("link");
+    let scripts = ["https://at.alicdn.com/t/font_1760192_zf96psu0uo.js"];
-    favicon.rel = "icon";
+    scripts.map(item => {
-    favicon.href =
-      "https://cdn.jsdelivr.net/gh/Aicirou/goindex-theme-acrou/favicon.ico";
-    document.getElementsByTagName("head")[0].appendChild(favicon);
-
-    let scripts = [
-      "https://at.alicdn.com/t/font_1760192_ud2z97y6kba.js"
-    ];
-    scripts.map((item) => {
       let script = document.createElement("script");
       script.type = "text/javascript";
       script.src = item;
@@ -40,11 +32,9 @@ export default {
 
     let path = window.location.pathname;
     this.config.path = path;
-    this.config.siteName = document.getElementsByTagName(
+    this.config.siteName = document.getElementsByTagName("title")[0].innerText;
-      "title"
-    )[0].innerText;
     this.config.title = this.siteName + "-" + decodeURI(path);
     this.$refs.layout.render(this.config);
   }
-}
+};
 </script>

src/assets/style/public.scss

@@ -1,62 +0,0 @@
-@import "~/node_modules/bulma"
-
-// .icon {
-// 	width: 2em;
-// 	height: 2em;
-// 	vertical-align: -0.5em;
-// 	fill: currentColor;
-// 	overflow: hidden;
-// }
-
-// th,td {
-// 	border: 0 !important;
-// }
-
-// .breadcrumb:not(:last-child) {
-// 	margin: 0.5rem 0;
-// 	padding: 0 0.75em;
-// }
-
-// .breadcrumb ul {
-// 	flex-wrap: inherit;
-// }
-
-// .breadcrumb li:not(:first-child):not(:last-child) {
-// 	margin: 0 5px;
-// 	overflow: hidden;
-// 	text-overflow: ellipsis;
-// 	white-space: nowrap;
-// }
-
-// body {
-// 	overflow: hidden;
-// }
-
-// .section {
-// 	padding: 0.5rem 0.5rem 1.5rem 0.5rem;
-// }
-
-// .container {
-// 	max-width: 980px !important;
-// }
-
-// .table {
-// 	width: 100%;
-// 	table-layout: fixed;
-// }
-
-// .table td {
-// 	overflow: hidden;
-// 	text-overflow: ellipsis;
-// 	white-space: nowrap;
-// }
-
-// .no-content {
-// 	background: url(https://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png) no-repeat 50% 50%;
-// 	height: 240px;
-// 	line-height: 240px;
-// 	text-align: center;
-// 	margin-top: 20px;
-// }
-
-$widescreen-enabled: false

src/assets/style/theme/acrou/index.scss

@@ -0,0 +1,57 @@
+body {
+	overflow: hidden;
+}
+
+.section {
+	padding: 0.5rem 0.5rem 1.5rem 0.5rem;
+}
+
+.container {
+	max-width: 980px;
+}
+
+.icon {
+	width: 2em;
+	height: 2em;
+	vertical-align: middle;
+	fill: currentColor;
+	overflow: hidden;
+}
+
+.breadcrumb:not(:last-child) {
+	margin: 0.5rem 0;
+	padding: 0 0.75em;
+}
+
+.breadcrumb ul {
+	flex-wrap: inherit;
+}
+
+.breadcrumb li:not(:first-child):not(:last-child) {
+	margin: 0 5px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.table {
+	width: 100%;
+	table-layout: fixed;
+	th,td {
+		border: 0 !important;
+	}
+	td {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		vertical-align: middle;
+	}
+}
+
+.no-content {
+	background: url(https://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png) no-repeat 50% 50%;
+	height: 240px;
+	line-height: 240px;
+	text-align: center;
+	margin-top: 20px;
+}

src/assets/style/theme/register.scss

@@ -0,0 +1,2 @@
+@import 'bulma';
+@import '~@/assets/style/theme/acrou/index.scss';

src/main.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import App from './App.vue'
 import axios from '@utils/axios'
 import VueAxios from 'vue-axios'
-// import bulma from 'bulma'
 
 var styles = [
   // 'https://cdn.jsdelivr.net/npm/bulma@0.8.1/css/bulma.min.css',
@@ -13,38 +12,9 @@ styles.forEach(item=>{
   document.write(`<link rel="stylesheet" href="${item}">`);
 })
 
-// document.write(
+document.write('<div id="app"></div>');
-//   `<style>.icon{width:2em;height:2em;vertical-align:-0.5em;fill:currentColor;overflow:hidden;}th,td{border:0 !important;}.breadcrumb:not(:last-child){margin:0.5rem 0;padding:0 0.75em;}.breadcrumb ul{flex-wrap:inherit;}.breadcrumb li:not(:first-child):not(:last-child){margin:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-//     body {
-//       overflow: hidden;
-//     }
-//     .section {
-//       padding: 0.5rem 0.5rem 1.5rem 0.5rem;
-//     }
-//     .container {
-//       max-width: 980px !important;
-//     }
-//     .table{
-//       width:100%;
-//       table-layout: fixed;
-//     }
-//     .table td{
-//       overflow: hidden;
-//       text-overflow: ellipsis;
-//       white-space: nowrap;
-//     }
-//     .no-content {
-//       background: url(https://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png) no-repeat 50% 50%;
-//       height: 240px;
-//       line-height: 240px;
-//       text-align: center;
-//       margin-top: 20px;
-//     }
-//   </style>`
-// );
 
 Vue.config.productionTip = false
-// Vue.use(bulma)
 Vue.use(VueAxios,axios)
 
 new Vue({

src/view/Layout.vue

@@ -67,7 +67,7 @@ export default {
         var name = path.split("/").pop();
         var ext = name.split(".").pop().toLowerCase();
         if (
-          "|html|php|css|go|java|js|json|txt|sh|md|".indexOf(`|${ext}|`) >= 0
+          "|html|php|css|go|java|py|js|json|txt|sh|md|".indexOf(`|${ext}|`) >= 0
         ) {
           this.show = "text";
           this.text = {
@@ -96,3 +96,6 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+@import "~@/assets/style/theme/register.scss";
+</style>

src/view/common/BreadCrumb.vue

@@ -1,9 +1,6 @@
 <template>
   <nav class="breadcrumb is-hidden-mobile is-hidden-touch" aria-label="breadcrumbs">
     <ul>
-      <li v-show="navs.length>0">
-        <a href="/">首页</a>
-      </li>
       <li
         v-for="(item,index) in navs"
         :class="(index+1)==navs.length?'is-active':''"
@@ -18,13 +15,18 @@
 
 <script>
 export default {
-  data: function () {
+  data: function() {
     return {
       navs: [],
+      index: "/"
     };
   },
   methods: {
-    render (path) {
+    render(path) {
+      // 如果是搜索不进行渲染
+      if (path.match("/[0-9]+:search")) {
+        return;
+      }
       var arr = path.trim("/").split("/");
       var p = "/";
       if (arr.length > 0) {
@@ -36,14 +38,20 @@ export default {
           }
           n = decodeURI(n);
           p += n + "/";
+          if (p.match("/[0-9]+:/")[0] === p) {
+            n = "首页";
+          }
           navs.push({
             path: p,
-            title: n,
+            title: n
           });
         }
         this.navs = navs;
+        if (navs.length == 1 && navs[0].title === "首页") {
+          this.navs = [];
+        }
       }
-    },
+    }
   }
-}
+};
 </script>

src/view/common/Navbar.vue

@@ -2,7 +2,7 @@
   <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
     <div class="container">
       <div class="navbar-brand">
-        <a class="navbar-item" href="/">
+        <a class="navbar-item" :href="currgd.id">
           <h3 class="title is-3 has-text-white">{{siteName}}</h3>
         </a>
         <a
@@ -70,18 +70,23 @@
 
 <script>
 export default {
-  created () {
+  created() {
     if (window.gds && window.gds.length > 0) {
       this.gds = window.gds.map((item, index) => {
         return {
           name: item,
-          id: ":" + index + "/",
+          id: "/" + index + ":/"
         };
       });
-      this.currgd = this.gds[0];
+      this.currgd = localStorage.getItem("currgd")
+        ? JSON.parse(localStorage.getItem("currgd"))
+        : this.gds[0];
+    }
+    if (window.MODEL) {
+      this.param = window.MODEL.q ? window.MODEL.q : "";
     }
   },
-  data: function () {
+  data: function() {
     return {
       siteName: "",
       param: "",
@@ -91,22 +96,25 @@ export default {
     };
   },
   methods: {
-    changeItem (item) {
+    changeItem(item) {
       this.currgd = item;
+      localStorage.setItem("currgd", JSON.stringify(item));
+      location.href = item.id;
     },
-    query () {
+    query() {
       if (this.param) {
-        location.href = "/?q=" + this.param;
+        location.href =
+          this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param;
       }
     },
-    burgerClick () {
+    burgerClick() {
-      this.isActive = !this.isActive
+      this.isActive = !this.isActive;
     }
   },
   computed: {
-    getCurrGD () {
+    getCurrGD() {
-      return this.gds.filter((item) => item.name !== this.currgd.name);
+      return this.gds.filter(item => item.name !== this.currgd.name);
-    },
+    }
   }
-}
+};
 </script>

src/view/page/GoImg.vue

@@ -1,22 +1,32 @@
 <template>
   <div class="content">
     <figure class="image">
-      <img :src="imgurl" />
+      <img :src="imgurl" :class="!display?'is-hidden':''" @load="loading" />
+      <center :class="display?'is-hidden':''">
+        <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+        <span class="sr-only">Loading...</span>
+      </center>
     </figure>
   </div>
 </template>
 
 <script>
 export default {
-  data: function () {
+  data: function() {
     return {
       imgurl: "",
+      display: false
     };
   },
   methods: {
-    render (path) {
+    render(path) {
       this.imgurl = path;
     },
+    loading(event) {
+      if (event.target.complete == true) {
+        this.display = true
+      }
+    }
   }
-}
+};
 </script>

src/view/page/GoList.vue

@@ -31,50 +31,29 @@
             class="is-hidden-mobile is-hidden-touch"
             v-if="file.mimeType!=='application/vnd.google-apps.folder'"
           >
+            <!-- <span class="icon" @click="copy(file.path)">
+              <i class="fa fa-copy" title="copy link" aria-hidden="true"></i>
+            </span> -->
             <span class="icon">
-              <i class="fa fa-download" @click="go(file.path,'down')"></i>
+              <i class="fa fa-download" title="Download" @click="go(file.path,'down')"></i>
             </span>
           </td>
         </tr>
       </tbody>
     </table>
     <div v-show="files.length==0" class="has-text-centered no-content"></div>
-    <nav class="pagination is-centered is-small" role="navigation" aria-label="pagination">
-      <a class="pagination-previous">Previous</a>
-      <a class="pagination-next">Next page</a>
-      <ul class="pagination-list">
-        <li>
-          <a class="pagination-link" aria-label="Goto page 1">1</a>
-        </li>
-        <li>
-          <span class="pagination-ellipsis">&hellip;</span>
-        </li>
-        <li>
-          <a class="pagination-link" aria-label="Goto page 45">45</a>
-        </li>
-        <li>
-          <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
-        </li>
-        <li>
-          <a class="pagination-link" aria-label="Goto page 47">47</a>
-        </li>
-        <li>
-          <span class="pagination-ellipsis">&hellip;</span>
-        </li>
-        <li>
-          <a class="pagination-link" aria-label="Goto page 86">86</a>
-        </li>
-      </ul>
-    </nav>
   </div>
 </template>
 
 <script>
 import { utc2beijing, formatFileSize } from "@utils/AcrouUtil";
 export default {
-  data: function () {
+  data: function() {
     return {
-      page: {},
+      page: {
+        page_token: null,
+        page_index: 0
+      },
       files: [],
       loading: false,
       columns: [
@@ -82,18 +61,18 @@ export default {
         {
           name: "修改时间",
           style: "width:20%",
-          class: "is-hidden-mobile is-hidden-touch",
+          class: "is-hidden-mobile is-hidden-touch"
         },
         {
           name: "大小",
-          style: "width:10%",
+          style: "width:10.5%",
-          class: "is-hidden-mobile is-hidden-touch",
+          class: "is-hidden-mobile is-hidden-touch"
         },
         {
           name: "下载",
           style: "width:6%",
-          class: "is-hidden-mobile is-hidden-touch",
+          class: "is-hidden-mobile is-hidden-touch"
-        },
+        }
       ],
       icon: {
         "application/vnd.google-apps.folder": "icon-morenwenjianjia",
@@ -104,36 +83,48 @@ export default {
         "text/plain": "icon-txt",
         "text/markdown": "icon-markdown",
         "text/x-ssa": "icon-ASS",
+        "text/html": "icon-html",
+        "text/x-python-script": "icon-python",
+        "text/x-java": "icon-java1",
+        "text/x-sh": "icon-SH",
         "application/x-subrip": "icon-srt",
-      },
+        "application/zip": "icon-zip",
+        "application/rar": "icon-rar",
+        "application/pdf": "icon-pdf",
+        "application/json": "icon-JSON1",
+        "application/x-yaml": "icon-YML",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "icon-word",
+        "image/bmp": "icon-img",
+        "image/jpeg": "icon-img",
+        "image/png": "icon-img"
+      }
     };
   },
   methods: {
-    render (path, param) {
+    render(path, param) {
       this.loading = true;
       var password = localStorage.getItem("password" + path);
       var p = {
+        q: param,
         password: password || null,
-        page_token: null,
+        ...this.page
-        page_index: 0
       };
       this.axios
         .post(path, p)
-        .then((res) => {
+        .then(res => {
-          var data = res.data.data;
+          var body = res.data;
-          if (
+          if (body) {
-            typeof data != "null" &&
+            // 判断响应状态
-            data.hasOwnProperty("error") &&
+            if (body.error && body.error.code == "401") {
-            data.error.code == "401"
+              this.checkPassword(path);
-          ) {
+              return;
-            var pass = prompt("目录加密，请输入密码", "");
-            localStorage.setItem("password" + path, pass);
-            if (pass != null && pass != "") {
-              this.render(path);
-            } else {
-              history.go(-1);
             }
-          } else if (typeof data != "null") {
+            let data = body.data;
+            if (!data) return;
+            this.page = {
+              page_token: body.nextPageToken,
+              page_index: body.curPageIndex
+            };
             var exts = [
               "html",
               "php",
@@ -142,6 +133,7 @@ export default {
               "java",
               "js",
               "json",
+              "py",
               "txt",
               "sh",
               "md",
@@ -152,17 +144,17 @@ export default {
               "jpg",
               "jpeg",
               "png",
-              "gif",
+              "gif"
             ];
             try {
-              this.files = data.files.map((item) => {
+              this.files = data.files.map(item => {
                 var p = path + item.name;
                 // HEAD.md
                 if (item.name === "HEAD.md") {
                   this.$emit("headmd", {
                     display: true,
                     file: item,
-                    path: p,
+                    path: p
                   });
                 }
                 // REDEME.md
@@ -170,7 +162,7 @@ export default {
                   this.$emit("readmemd", {
                     display: true,
                     file: item,
-                    path: p,
+                    path: p
                   });
                 }
 
@@ -186,7 +178,7 @@ export default {
                   path: p,
                   ...item,
                   modifiedTime: utc2beijing(item.modifiedTime),
-                  size: formatFileSize(item.size),
+                  size: formatFileSize(item.size)
                 };
               });
             } catch (e) {
@@ -195,19 +187,32 @@ export default {
           }
           this.loading = false;
         })
-        .catch((ex) => {
+        .catch(err => {
           this.loading = false;
         });
     },
-    go (path, type = "view") {
+    checkPassword(path) {
+      var pass = prompt("目录加密，请输入密码", "");
+      localStorage.setItem("password" + path, pass);
+      if (pass != null && pass != "") {
+        this.render(path);
+      } else {
+        history.go(-1);
+      }
+    },
+    copy(path) {
+      path = path.replace("?a=view", "");
+      // TODO
+    },
+    go(path, type = "view") {
       if (type === "down") {
         path = path.replace("?a=view", "");
       }
       location.href = path;
     },
-    getIcon (type) {
+    getIcon(type) {
       return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
-    },
+    }
   }
-}
+};
 </script>

vue.config.js

@@ -1,35 +1,37 @@
-const path = require('path');
+const path = require("path");
 
-function resolve (dir) {
+function resolve(dir) {
-    return path.join(__dirname, dir);
+  return path.join(__dirname, dir);
 }
 module.exports = {
-    lintOnSave: true,
+  lintOnSave: true,
-    css: {
+  //   css: {
-        loaderOptions: {
+  //     loaderOptions: {
-          // 设置 scss 公用变量文件
+  //       sass: {
-          sass: {
+  //         prependData: `@import '~@/assets/style/public.scss';`,
-            prependData: `@import '~@/assets/style/public.scss';`
+  //       },
-          }
+  //     }
-        }
+  //   },
+  chainWebpack: (config) => {
+    config.resolve.alias
+      .set("@", resolve("src"))
+      .set("@assets", resolve("src/assets"))
+      .set("@utils", resolve("src/utils"))
+      .set("@node_modules", resolve("node_modules"));
+    config.output
+      .filename("js/app.mini.js")
+      .end();
+  },
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "https://ossdev.achirou.workers.dev/",
+        ws: true,
+        changeOrigin: true,
+        pathRewrite: {
+          "^/api": "",
+        },
+      },
     },
-    devServer: {
+  },
-        proxy: {
-            "/api": {
-                target: "https://ossdev.achirou.workers.dev/",
-                ws: true,
-                changeOrigin: true,
-                pathRewrite: {
-                    "^/api": "",
-                },
-            },
-        }
-    },
-    chainWebpack: (config) => {
-        config.resolve.alias
-            .set('@', resolve('src'))
-            .set('@assets', resolve('src/assets'))
-            .set('@utils', resolve('src/utils'))
-            .set('@node_modules', resolve('node_modules'))
-    }
 };