chore: migrate to vue@3, vite@3, vue-router@4

.nvmrc

@@ -0,0 +1 @@
+v14.20.0

public/index.html → index.html

@@ -11,6 +11,7 @@
       <strong>We're sorry but hello_vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

package.json

@@ -6,9 +6,9 @@
   "scripts": {
     "dist": "webpack --config webpack.prod.js",
     "build": "webpack --config webpack.dev.js",
-    "watch": "webpack-dev-server --open --config webpack.dev.js",
+    "watch": "vite serve",
     "devserver": "export NODE_ENV=development && node --inspect server/app",
-    "server": "export NODE_ENV=production && node server/app",
+    "server": "export NODE_ENV=production && nodemon server/app",
     "client": "export NODE_ENV=production && node client"
   },
   "keywords": [
@@ -29,40 +29,31 @@
     "koa-static": "^5.0.0",
     "koa2-cors": "^2.0.6",
     "log4js": "^4.0.2",
-    "mysql": "^2.16.0",
-    "socket.io": "^2.2.0",
-    "vue": "^2.6.6",
-    "vue-router": "^3.0.2",
-    "vuex": "^3.1.0"
+    "mysql": "^2.18.1",
+    "socket.io": "^4.5.1",
+    "socket.io-client": "^4.5.1",
+    "vue": "^3.2.37",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.3",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@vue/babel-preset-app": "^3.5.1",
+    "@faker-js/faker": "^7.4.0",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vue/compat": "^3.2.37",
+    "@vue/compiler-sfc": "^3.2.37",
     "autoprefixer": "^9.4.9",
-    "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
-    "clean-webpack-plugin": "^1.0.1",
-    "css-loader": "^2.1.0",
+    "css-loader": "^2.1.1",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.11.0",
-    "nodemon": "^1.18.10",
-    "postcss-loader": "^3.0.0",
+    "nodemon": "^1.19.4",
     "pug": "^2.0.3",
-    "pug-plain-loader": "^1.0.0",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
+    "sass": "^1.54.4",
     "ts-node": "^8.0.3",
     "typescript": "^3.4.1",
-    "url-loader": "^1.1.2",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.5.21",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.0",
-    "webpack-merge": "^4.2.1"
+    "vite": "^3.0.7"
   },
   "postcss": {
     "plugins": {

server/app.js

@@ -15,7 +15,9 @@ const errorHandler = require("./middleware/error");
 const addRouters = require("./router");
 const config = require("./config/app");
 const server = require("http").createServer(app.callback());
-const io = require("socket.io")(server);
+const io = require("socket.io")(server, {
+  cors: config.cors
+});
 const addSocket = require("./socket");
 const path = require("path");
 const baseDir = path.normalize(__dirname + "/..");
@@ -53,13 +55,7 @@ app.use(favicon(path.join(baseDir, "public/favicon.ico")));
 
 //cors
 app.use(
-  cors({
-    origin: "http://localhost:" + config.clientPort, // * 仍然不能访问header,要写明具体域名才行
-    credentials: true, //将凭证暴露出来, 前端才能获取cookie
-    allowMethods: ["GET", "POST", "DELETE"],
-    exposeHeaders: ["Authorization"], // 将header字段expose出去，前端才能获取该header字段
-    allowHeaders: ["Content-Type", "Authorization", "Accept"] // 允许添加到header的字段
-  })
+  cors(config.cors)
 );
 
 //json-web-token
@@ -109,7 +105,7 @@ app.on("error", (err, ctx) => {
 });
 
 if (!module.parent) {
-  const { port, socketPort } = config;
+  const { port, socketPort, clientPort } = config;
   /**
    * koa app
    */
@@ -125,4 +121,9 @@ if (!module.parent) {
   server.listen(socketPort);
   log.info(`=== socket listening on port ${socketPort} ===`);
   console.log("socket server running at: http://localhost:%d", socketPort);
+
+  /**
+   * client
+   */
+  console.log("allowed client at: http://localhost:%d", clientPort);
 }

server/config/app.js

@@ -1,12 +1,24 @@
 /**
  * app config
  */
-module.exports = {
+const clientPort = 3000;
+
+const config = {
     isDev: process.env.NODE_ENV == 'development',
-    port: 3000,
+    port: 8080,
     socketPort: 3001,
-    clientPort: 3002,
+    clientPort,
     secret: 'JEFFJWT',
     exp: 60 * 60,
+    cors: {
+        origin: `http://localhost:${clientPort}`, // * 仍然不能访问header,要写明具体域名才行
+        credentials: true, //将凭证暴露出来, 前端才能获取cookie
+        allowMethods: ["GET", "POST", "DELETE", "PUT", "PATCH"],
+        exposeHeaders: ["Authorization"], // 将header字段expose出去，前端才能获取该header字段
+        allowHeaders: ["Content-Type", "Authorization", "Accept"] // 允许添加到header的字段
+    }
 };
 
+
+module.exports = config
+

server/config/db.js

@@ -6,7 +6,7 @@ module.exports={
 	host: "localhost",
 	port: "3306",
 	user: "root",
-	password: "jianfeng",
+	password: "Halo;user12;.",
 	database: "chatdb",
 	charset : 'utf8mb4',//utf8mb4才能保存emoji
 	multipleStatements: true,// 可同时查询多条语句, 但不能参数化传值

server/middleware/error.js

@@ -11,7 +11,7 @@ module.exports = () => {
             log.error(err);
             let obj = {
                 code: -1,
-                message: '服务器错误'
+                message: 'Internal Server Error'
             };
             if (ctx.app.env === 'development') {
                 obj.err = err;

src/App.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-	div#app
-		Modal
-		Tip(:class="{ active:tip.show}" :name="tip.name" :txt="tip.txt")
-		Dialog
-		router-view
+div#app
+	Modal
+	Tip(:class="{ active:tip.show}" :name="tip.name" :txt="tip.txt")
+	Dialog
+	router-view
 </template>
 <script>
 import { mapState, mapGetters } from "vuex"

src/common/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 //全局配置
-axios.defaults.baseURL = 'http://localhost:3000';
+axios.defaults.baseURL = 'http://localhost:8080';
 axios.defaults.timeout = 20000;
 axios.defaults.withCredentials = true;
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

src/components/ChatMsg.vue

@@ -3,7 +3,7 @@
     v-on:click.stop="$emit('setZ')" )
     header(v-drag)
         .avatar(v-on:click.stop="profile(info)")
-            img(:src="info.avatar? info.avatar: aPic.src") 
+            img(:src="info.avatar? info.avatar: aPic.src")
         h2 {{info.nick}}
         .close(v-on:click.stop="$emit('close')") ×
     .body(ref="body")
@@ -15,7 +15,7 @@
                     p.word(:style="{textAlign:align(item.msg)}") {{item.msg}}
                 span.avatar
                     img(:src="selfInfo.avatar? selfInfo.avatar: aPic.src")
-            .talk(:key="i" v-else)
+            .talk(:key="i + 1" v-else)
                 span.avatar
                     img(:src="info.avatar? info.avatar: aPic.src")
                 div
@@ -40,7 +40,7 @@ export default {
         return {
             text: "",
             aPic: {
-                src: require("../assets/avatar.jpg")
+                src: "../assets/avatar.jpg"
             }
         };
     },

src/components/GroupMsg.vue

@@ -3,7 +3,7 @@
     v-on:click.stop="$emit('setZ')" )
     header(v-drag)
         .avatar(v-on:click.stop="groupProfile(info)")
-            img(:src="info.avatar? info.avatar: aPic.src") 
+            img(:src="info.avatar? info.avatar: aPic.src")
         h2 {{info.name}}
         .close(v-on:click.stop="$emit('close')") ×
     .body
@@ -17,7 +17,7 @@
                             p.word(:style="{textAlign:align(item.msg)}") {{item.msg}}
                         span.avatar
                             img(:src="item.avatar? item.avatar: aPic.src")
-                    .talk(:key="i" v-else)
+                    .talk(:key="i + 1" v-else)
                         span.avatar
                             img(:src="item.avatar? item.avatar: aPic.src")
                         div
@@ -32,7 +32,7 @@
                 ul
                     li(v-for="(item,i) in info.users" :key="item.id")
                         .avatar(v-on:click.stop="profile(item)")
-                            img(:src="item.avatar? item.avatar: aPic.src") 
+                            img(:src="item.avatar? item.avatar: aPic.src")
                         p(v-on:click.stop="chatWin(item)") {{item.nick}}
 </template>
 <script>
@@ -50,10 +50,10 @@ export default {
         return {
             text: "",
             aPic: {
-                src: require("../assets/avatar.jpg")
+                src: "../assets/avatar.jpg"
             },
             gPic: {
-                src: require("../assets/group.jpg")
+                src: "../assets/group.jpg"
             }
         };
     },

src/components/GroupProfile.vue

@@ -1,34 +1,34 @@
 <template lang="pug">
-    .profile(:style="{left:sty.left+'px',top:sty.top+'px',zIndex:sty.z}" 
-        v-on:click.stop="$emit('setZ')")
-        header(v-drag)
-            h2 {{info.name}}
-            div(v-on:click.stop="$emit('close')") ×
-        .body
-            .avatar
-                img(:src="info.avatar? info.avatar: gPic.src" ref="img")
-                input(type="file" v-on:change="uploadFile($event)" v-if="infoType == 0")
-            .form.form-aligned
-                .control-group
-                    label 类型
-                    p 群组
-                .control-group
-                    label 群主
-                    p
-                        a(href="javascript:;") {{info.create_name}}
-                .control-group
-                    label 名称
-                    input(type="text" :value ="info.name" maxlength="20" v-if="infoType == 0" ref="name")
-                    p(v-if="infoType!=0") {{info.name}}
-                .control-group
-                    label 介绍
-                    textarea(v-if="infoType == 0" maxlength="50" ref="desc") {{info.desc}}
-                    p(v-if="infoType!=0") {{info.desc}}
-                .control-group(v-if="infoType == 2")
-                    label 验证信息
-                    input(type="text" maxlength="20" ref="verify")
-            button(class="button" v-if="infoType == 0" v-on:click="save(info)") save
-            button(class="button" v-if="infoType == 2" v-on:click="apply(info)") 申请加入
+.profile(:style="{left:sty.left+'px',top:sty.top+'px',zIndex:sty.z}" 
+    v-on:click.stop="$emit('setZ')")
+    header(v-drag)
+        h2 {{info.name}}
+        div(v-on:click.stop="$emit('close')") ×
+    .body
+        .avatar
+            img(:src="info.avatar? info.avatar: gPic.src" ref="img")
+            input(type="file" v-on:change="uploadFile($event)" v-if="infoType == 0")
+        .form.form-aligned
+            .control-group
+                label 类型
+                p 群组
+            .control-group
+                label 群主
+                p
+                    a(href="javascript:;") {{info.create_name}}
+            .control-group
+                label 名称
+                input(type="text" :value ="info.name" maxlength="20" v-if="infoType == 0" ref="name")
+                p(v-if="infoType!=0") {{info.name}}
+            .control-group
+                label 介绍
+                textarea(v-if="infoType == 0" maxlength="50" ref="desc") {{info.desc}}
+                p(v-if="infoType!=0") {{info.desc}}
+            .control-group(v-if="infoType == 2")
+                label cannot be empty
+                input(type="text" maxlength="20" ref="verify")
+        button(class="button" v-if="infoType == 0" v-on:click="save(info)") save
+        button(class="button" v-if="infoType == 2" v-on:click="apply(info)") 申请加入
 </template>
 <script>
 import { mapState, mapGetters } from "vuex";
@@ -52,7 +52,7 @@ export default {
     data() {
         return {
             gPic: {
-                src: require("../assets/group.jpg")
+                src: "../assets/group.jpg"
             },
             infoType: 2, //0 自己 1 已经加入 2 未加入
             showDailog: false