feat: 将配置文件抽为环境变量

multiojuice4 · Jul 3, 2020 · 31948e5 · 31948e5
1 parent 2770151
commit 31948e5
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 72 deletions.
diff --git a/.gitignore b/.gitignore
@@ -27,3 +27,4 @@ test.sh
 dist.tar.gz
 package-lock.json
 config.js
+.env
diff --git a/package.json b/package.json
@@ -17,6 +17,8 @@
     "@authing/sso": "^1.3.0",
     "authing-js-sdk": "^3.18.6",
     "axios": "^0.18.0",
+    "dotenv-webpack": "^1.8.0",
+    "html-webpack-plugin": "^4.3.0",
     "otplib": "^12.0.1",
     "qrcode": "^1.4.1",
     "thirty-two": "^1.0.2",

diff --git a/public/index.html b/public/index.html
@@ -24,30 +24,6 @@
         "authing-login-form-wrapper"
       )[0].style.height = window.innerHeight + "px";
     };
-    /* 测试 LoginForm */
-    // let clientId = '5cbd6716aaaa70cb9a58d86f'
-    // const guard = new AuthingGuard(clientId, undefined, {
-    //   hideClose: true,
-    //   isSSO: false,
-    //   qrcodeScanning: {
-    //     redirect: false,
-    //   },
-    //   logo: "https://usercontents.authing.cn/client/[email protected]",
-    //   title: "Authing",
-    //   host: {
-    //     user: 'http://localhost:5555/graphql',
-    //     oauth: 'http://localhost:5556/graphql',
-    //     // user: 'https://users.authing.cn/graphql',
-    //     // oauth: 'https://oauth.authing.cn/graphql'
-    //   }
-    // });
-    // guard.on('authenticated', data => {
-    //   console.log(data)
-    // })
-    // guard.on('register', data => {
-    //   console.log(data)
-    // })
-    /* 测试 SSO */
     String.prototype.endsWith = function(suffix) {
       return this.indexOf(suffix, this.length - suffix.length) !== -1;
     };
@@ -60,35 +36,6 @@
         return null;
       }
     };
-    let hostName = location.hostname;
-
-    function getEndpoint(hostName) {
-      let EndpointSwitch = {
-        "littleimp.cn": [
-          "https://core.littleimp.cn/graphql",
-          "https://core.littleimp.cn/graphql"
-        ],
-        "celebes.live": [
-          "https://core.celebes.live/graphql",
-          "https://core.celebes.live/graphql"
-        ],
-        localhost: ["http://localhost:5510/graphql", "http://localhost:5510/graphql"]
-    };
-      for (index in EndpointSwitch) {
-        window.isDev = true;
-        if (hostName.endsWith(index)) {
-          return EndpointSwitch[index];
-        }
-      }
-      window.isDev = false;
-      return [
-        "https://users.authing.cn/graphql",
-        "https://oauth.authing.cn/graphql"
-      ];
-    }
-    // let [userGqlEndPoint, oauthGqlEndPoint] = getEndpoint(hostName);
-    let userGqlEndPoint = getEndpoint(hostName)[0];
-    let oauthGqlEndPoint = getEndpoint(hostName)[1];
     let appId = getQueryString("app_id") || getQueryString("client_id");
     const guard = new Guard(undefined, {
       appId: appId,
@@ -100,10 +47,10 @@
         redirect: false
       },
       host: {
-        user: userGqlEndPoint,
-        oauth: oauthGqlEndPoint
+        user: "<%= htmlWebpackPlugin.options.API_ENDPOINT %>",
+        oauth: "<%= htmlWebpackPlugin.options.API_ENDPOINT %>",
       },
-      passwordEncPublicKey: undefined
+      passwordEncPublicKey: "<%= htmlWebpackPlugin.options.PUBLIC_KEY %>",
     });
   </script>
 </html>
diff --git a/vue.config.js b/vue.config.js
@@ -1,12 +1,24 @@
-// const path = require('path')
-// const fs = require('fs')
-let host = process.env.ServerHost||'http://localhost:5510'
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const Dotenv = require("dotenv-webpack");
+// const path = require("path")
+// const fs = require("fs")
+
+let host = process.env.ServerHost || "http://localhost:5510";
 module.exports = {
   lintOnSave: false,
   configureWebpack: {
     output: {
-      libraryExport: "default"
-    }
+      libraryExport: "default",
+    },
+    plugins: [
+      new Dotenv(),
+      new HtmlWebpackPlugin({
+        API_ENDPOINT: process.env.API_ENDPOINT,
+        PUBLIC_KEY: process.env.PUBLIC_KEY,
+        inject: true,
+        template: "public/index.html",
+      }),
+    ],
   },
   css: { extract: false },
   publicPath: process.env.NODE_ENV === "production" ? "/login" : "/",
@@ -19,16 +31,16 @@ module.exports = {
     proxy: {
       "^/authorize": {
         target: `${host}/sso`,
-        changeOrigin: true
+        changeOrigin: true,
       },
       "^/oauth": {
         target: `${host}`,
-        changeOrigin: true
+        changeOrigin: true,
       },
       "^/cas/session": {
         target: `${host}`,
-        changeOrigin: true
-      }
-    }
-  }
+        changeOrigin: true,
+      },
+    },
+  },
 };