Merge 30d0ff0d44 into 9d8c7edf91

.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
+

.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

mock/mock-server.js

@@ -33,8 +33,10 @@ 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)

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()
 }

vue.config.js

@@ -15,114 +15,151 @@ 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
 
-// All configuration item explanations can be find in https://cli.vuejs.org/config/
+/** mock-server开关,该环境变量定义在文件`.env.development`中*/
-module.exports = {
+const enableMockServer = process.env.VUE_APP_MOCK === 'Mock_Server'
+const mockServerContext = process.env.VUE_APP_MOCK_SERVER_CONTEXT
+const mockProxy = {
   /**
-   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * dev-api/login => mock/login
-   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * 本对象是express的代理插件http-proxy-middlewaredre
-   * then publicPath should be set to "/bar/".
+   * (https://github.com/chimurai/http-proxy-middleware)
-   * In most cases please use '/' !!!
+   * 当方法是POST时，数据无法从原始请求传到代理请求，见下帖
-   * Detail: https://cli.vuejs.org/config/#publicpath
+   * https://github.com/chimurai/http-proxy-middleware/issues/40
+   * 解决办法是在它的onProxyReq事件中，手动把请求的body数据搬运到代理请求中
+   *
+   * target是指匹配该路径的主机。见https://webpack.js.org/configuration/dev-server/#devserverproxy
    */
-  publicPath: '/',
+  [process.env.VUE_APP_BASE_API]: {
-  outputDir: 'dist',
+    target: `http://localhost:${port}`,
-  assetsDir: 'static',
+    changeOrigin: true,
-  lintOnSave: process.env.NODE_ENV === 'development',
+    ws: true, // proxy websockets
-  productionSourceMap: false,
+    pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: mockServerContext },
-  devServer: {
+    /** 在POST方法下，直接把body数据以JSON形式搬运到代理请求对象proxyRequest中去 */
-    port: port,
+    onProxyReq: (proxyRequest, request, response, options) => {
-    open: true,
+      if (request.method === 'POST' && request.body) {
-    overlay: {
+        const bodyData = JSON.stringify(request.body)
-      warnings: false,
+        proxyRequest.setHeader('Content-Type', 'application/json')
-      errors: true
+        proxyRequest.setHeader('Content-Length', Buffer.byteLength(bodyData))
-    },
+        proxyRequest.write(bodyData)
-    before: require('./mock/mock-server.js')
-  },
-  configureWebpack: {
-    // provide the app's title in webpack's name field, so that
-    // it can be accessed in index.html to inject the correct title.
-    name: name,
-    resolve: {
-      alias: {
-        '@': resolve('src')
       }
     }
-  },
+  }}
-  chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
 
-    // set svg-sprite-loader
+// All configuration item explanations can be find in https://cli.vuejs.org/config/
-    config.module
+module.exports = () => {
-      .rule('svg')
+  return {
-      .exclude.add(resolve('src/icons'))
+    /**
-      .end()
+     * You will need to set publicPath if you plan to deploy your site under a sub path,
-    config.module
+     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-      .rule('icons')
+     * then publicPath should be set to "/bar/".
-      .test(/\.svg$/)
+     * In most cases please use '/' !!!
-      .include.add(resolve('src/icons'))
+     * Detail: https://cli.vuejs.org/config/#publicpath
-      .end()
+     */
-      .use('svg-sprite-loader')
+    publicPath: '/',
-      .loader('svg-sprite-loader')
+    outputDir: 'dist',
-      .options({
+    assetsDir: 'static',
-        symbolId: 'icon-[name]'
+    lintOnSave: process.env.NODE_ENV === 'development',
-      })
+    productionSourceMap: false,
-      .end()
+    devServer: {
+      port: port,
+      open: true,
+      overlay: {
+        warnings: false,
+        errors: true
+      },
 
-    // set preserveWhitespace
+      proxy: enableMockServer ? mockProxy : undefined,
-    config.module
+      /** 启动mock服务器 */
-      .rule('vue')
+      /** @link https://webpack.js.org/configuration/dev-server/#devserverbefore*/
-      .use('vue-loader')
+      /** before定义为function (app)。其中app指的是express的app */
-      .loader('vue-loader')
+      before: enableMockServer ? require('./mock/mock-server.js').default : undefined
-      .tap(options => {
+    },
-        options.compilerOptions.preserveWhitespace = true
+    configureWebpack: {
-        return options
+      // provide the app's title in webpack's name field, so that
-      })
+      // it can be accessed in index.html to inject the correct title.
-      .end()
+      name: name,
-
+      resolve: {
-    config
+        alias: {
-      // https://webpack.js.org/configuration/devtool/#development
+          '@': resolve('src')
-      .when(process.env.NODE_ENV === 'development',
-        config => config.devtool('cheap-source-map')
-      )
-
-    config
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
-            })
-          config.optimization.runtimeChunk('single')
         }
-      )
+      }
+    },
+    chainWebpack(config) {
+      config.plugins.delete('preload') // TODO: need test
+      config.plugins.delete('prefetch') // TODO: need test
+
+      // set svg-sprite-loader
+      config.module
+        .rule('svg')
+        .exclude.add(resolve('src/icons'))
+        .end()
+      config.module
+        .rule('icons')
+        .test(/\.svg$/)
+        .include.add(resolve('src/icons'))
+        .end()
+        .use('svg-sprite-loader')
+        .loader('svg-sprite-loader')
+        .options({
+          symbolId: 'icon-[name]'
+        })
+        .end()
+
+      // set preserveWhitespace
+      config.module
+        .rule('vue')
+        .use('vue-loader')
+        .loader('vue-loader')
+        .tap(options => {
+          options.compilerOptions.preserveWhitespace = true
+          return options
+        })
+        .end()
+
+      config
+        // https://webpack.js.org/configuration/devtool/#development
+        .when(process.env.NODE_ENV === 'development',
+          config => config.devtool('cheap-source-map')
+        )
+
+      config
+        .when(process.env.NODE_ENV !== 'development',
+          config => {
+            config
+              .plugin('ScriptExtHtmlWebpackPlugin')
+              .after('html')
+              .use('script-ext-html-webpack-plugin', [{
+                // `runtime` must same as runtimeChunk name. default is `runtime`
+                inline: /runtime\..*\.js$/
+              }])
+              .end()
+            config
+              .optimization.splitChunks({
+                chunks: 'all',
+                cacheGroups: {
+                  libs: {
+                    name: 'chunk-libs',
+                    test: /[\\/]node_modules[\\/]/,
+                    priority: 10,
+                    chunks: 'initial' // only package third parties that are initially dependent
+                  },
+                  elementUI: {
+                    name: 'chunk-elementUI', // split elementUI into a single package
+                    priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                    test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                  },
+                  commons: {
+                    name: 'chunk-commons',
+                    test: resolve('src/components'), // can customize your rules
+                    minChunks: 3, //  minimum common number
+                    priority: 5,
+                    reuseExistingChunk: true
+                  }
+                }
+              })
+            config.optimization.runtimeChunk('single')
+          }
+        )
+    }
   }
 }