1、修正dockerfile中的淘宝npm源为最新源

2、修改.env .env.development my.conf websocket.js 使得websocket能在生产环境中被nginx代理，以及开发环境中也能正常使用。
3、参考链接：https://www.jianshu.com/p/71a77699cd94

Signed-off-by: thu_renyi <630362055@qq.com>

docker_env/nginx/my.conf

@@ -23,4 +23,21 @@ server {
         rewrite ^/api/(.*)$ /$1 break;  #重写
         proxy_pass http://177.8.0.12:8000/; # 设置代理服务器的协议和地址
      }
+     location /socket/ {
+            rewrite ^/socket/(.*)$     /$1 break;
+            proxy_pass http://177.8.0.12:8000/;
+
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+            proxy_set_header Upgrade websocket;
+            proxy_set_header Connection Upgrade;
+
+            proxy_http_version 1.1;
+            proxy_connect_timeout 4s;                #配置点1
+            proxy_read_timeout 300s;                  #配置点2，如果没效，可以考虑这个时间配置长一点
+            proxy_send_timeout 12s;                  #配置点3
+            #add_header Content-Security-Policy upgrade-insecure-requests;
+    }
  }

docker_env/web/Dockerfile

@@ -1,7 +1,7 @@
 FROM registry.cn-zhangjiakou.aliyuncs.com/dvadmin-pro/node12-base-web:latest
 WORKDIR /web/
 COPY web/. .
-RUN npm install --registry=https://registry.npm.taobao.org
+RUN npm install --registry=https://registry.npmmirror.com
 RUN npm run build
 
 FROM nginx:alpine

docker_env/web/DockerfileBuild

@@ -1,3 +1,3 @@
 FROM node:14-alpine
 COPY ./web/package.json /
-RUN npm install --registry=https://registry.npm.taobao.org
+RUN npm install --registry=https://registry.npmmirror.com

web/.env

@@ -5,7 +5,7 @@ VUE_APP_TITLE=D2Admin
 
 # 网络请求公用地址
 VUE_APP_API=/api/
-
+VUE_APP_SOCKET_API=/socket
 # 仓库地址
 VUE_APP_REPO=https://github.com/d2-projects/d2-admin-start-kit
 

web/.env.development

@@ -6,4 +6,4 @@ VUE_APP_TITLE=企业级后台管理系统
 VUE_APP_PM_ENABLED = true
 # 后端接口地址及端口(域名)
 VUE_APP_API = "http://127.0.0.1:8000"
-
+VUE_APP_SOCKET_API = ws://127.0.0.1:8000

web/src/api/websocket.js

@@ -3,7 +3,8 @@ import util from '@/libs/util'
 function initWebSocket (e) {
   const token = util.cookies.get('token')
   if (token) {
-    const wsUri = 'ws://127.0.0.1:8000/?auth=' + token
+    // 根据环境选择路径
+    const wsUri = process.env.NODE_ENV === 'development' ? `${process.env.VUE_APP_SOCKET_API}/?auth=` + token : `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}${process.env.VUE_APP_SOCKET_API}/?auth=${token}`
     this.socket = new WebSocket(wsUri)// 这里面的this都指向vue
     this.socket.onerror = webSocketOnError
     this.socket.onmessage = webSocketOnMessage