From 0a4b206c410e17bcf09462e641bc1c74a8876094 Mon Sep 17 00:00:00 2001
From: RoBlues <roblues@qq.com>
Date: Mon, 3 Feb 2020 19:01:09 +0800
Subject: [PATCH] move option for enable/disable mock/mock-erver to .env.* file

---
 .env.development    | 13 +++++++++++++
 .env.production     | 11 +++++++++++
 mock/mock-server.js |  5 ++++-
 src/main.js         |  5 ++++-
 vue.config.js       | 37 ++++++++++++++++++++++++++++++++++++-
 5 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/.env.development b/.env.development
index 8f5856db..02e2f5a7 100644
--- a/.env.development
+++ b/.env.development
@@ -4,6 +4,18 @@ ENV = 'development'
 # base api
 VUE_APP_BASE_API = '/dev-api'
 
+# 用VUE_APP_MOCK配置如何使用Mock
+# 该值会被用在Vue.config.js和src/main.js中
+# 其取值和意义如下：
+# None - 表示不使用Mock或Mock-server,不配置意义相同
+# Mock - 表示使用mock
+# Mock_Server 表示使用Mock_Server。
+VUE_APP_MOCK = Mock
+
+# Mock_Server Context 表示在使用Mock-Server时，它的应用context。
+# 该值会被用在vue.config.js和/mock/mock-server.js中
+VUE_APP_MOCK_SERVER_CONTEXT = /mock
+
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
 # It only does one thing by converting all import() to require().
@@ -12,3 +24,4 @@ VUE_APP_BASE_API = '/dev-api'
 # Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
 
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
diff --git a/.env.production b/.env.production
index 80c81030..be814328 100644
--- a/.env.production
+++ b/.env.production
@@ -4,3 +4,14 @@ ENV = 'production'
 # base api
 VUE_APP_BASE_API = '/prod-api'
 
+# 用VUE_APP_MOCK配置如何使用Mock
+# 该值会被用在Vue.config.js和src/main.js中
+# 其取值和意义如下：
+# None - 表示不使用Mock或Mock-server,不配置意义相同
+# Mock - 表示使用mock
+# Mock_Server 表示使用Mock_Server。
+VUE_APP_MOCK = Mock
+
+# Mock_Server Context 表示在使用Mock-Server时，它的应用context。
+# 该值会被用在vue.config.js和/mock/mock-server.js中
+VUE_APP_MOCK_SERVER_CONTEXT = /mock
\ No newline at end of file
diff --git a/mock/mock-server.js b/mock/mock-server.js
index 873d7bc4..63b395d2 100644
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
@@ -45,8 +45,11 @@ function unregisterRoutes() {
 
 // for mock server
 const responseFake = (url, type, respond) => {
+  /** Mock-Server的Context */
+  const MOCK_SERVER_CONTEXT = '^' + process.env.VUE_APP_MOCK_SERVER_CONTEXT
+
   return {
-    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
+    url: new RegExp(`${MOCK_SERVER_CONTEXT}${url}`),
     type: type || 'get',
     response(req, res) {
       console.log('request invoke:' + req.path)
diff --git a/src/main.js b/src/main.js
index 1049d762..249f7a32 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,7 +27,10 @@ import * as filters from './filters' // global filters
  * Currently MockJs will be used in the production environment,
  * please remove it before going online ! ! !
  */
-if (process.env.NODE_ENV === 'production') {
+/**
+ * VUE_APP_MOCK is defined in .env.production or .env.development
+ */
+if (process.env.VUE_APP_MOCK === 'Mock') {
   const { mockXHR } = require('../mock')
   mockXHR()
 }
diff --git a/vue.config.js b/vue.config.js
index b546968e..771fb581 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -15,6 +15,36 @@ const name = defaultSettings.title || 'vue Element Admin' // page title
 // port = 9527 npm run dev OR npm run dev --port = 9527
 const port = process.env.port || process.env.npm_config_port || 9527 // dev port
 
+/** mock-server开关,该环境变量定义在文件`.env.development`中*/
+const enableMockServer = process.env.VUE_APP_MOCK === 'Mock_Server'
+const mockServerContext = process.env.VUE_APP_MOCK_SERVER_CONTEXT
+const mockProxy = {
+  /**
+   * dev-api/login => mock/login
+   * 本对象是express的代理插件http-proxy-middlewaredre
+   * (https://github.com/chimurai/http-proxy-middleware)
+   * 当方法是POST时，数据无法从原始请求传到代理请求，见下帖
+   * https://github.com/chimurai/http-proxy-middleware/issues/40
+   * 解决办法是在它的onProxyReq事件中，手动把请求的body数据搬运到代理请求中
+   *
+   * target是指匹配该路径的主机。见https://webpack.js.org/configuration/dev-server/#devserverproxy
+   */
+  [process.env.VUE_APP_BASE_API]: {
+    target: `http://localhost:${port}`,
+    changeOrigin: true,
+    ws: true, // proxy websockets
+    pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: mockServerContext },
+    /** 在POST方法下，直接把body数据以JSON形式搬运到代理请求对象proxyRequest中去 */
+    onProxyReq: (proxyRequest, request, response, options) => {
+      if (request.method === 'POST' && request.body) {
+        const bodyData = JSON.stringify(request.body)
+        proxyRequest.setHeader('Content-Type', 'application/json')
+        proxyRequest.setHeader('Content-Length', Buffer.byteLength(bodyData))
+        proxyRequest.write(bodyData)
+      }
+    }
+  }}
+
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = () => {
   return {
@@ -37,7 +67,12 @@ module.exports = () => {
         warnings: false,
         errors: true
       },
-      before: require('./mock/mock-server.js').default
+
+      proxy: enableMockServer ? mockProxy : undefined,
+      /** 启动mock服务器 */
+      /** @link https://webpack.js.org/configuration/dev-server/#devserverbefore*/
+      /** before定义为function (app)。其中app指的是express的app */
+      before: enableMockServer ? require('./mock/mock-server.js').default : undefined
     },
     configureWebpack: {
       // provide the app's title in webpack's name field, so that