diff --git a/vueJs/.env.production b/vueJs/.env.production
new file mode 100644
index 000000000..4002cdc37
--- /dev/null
+++ b/vueJs/.env.production
@@ -0,0 +1,16 @@
+# Base api
+# Remeber to change this to your production server address
+# Here I used my mock server for this project
+# VUE_APP_BASE_API = 'https://vue-typescript-admin-mock-server.armour.now.sh/mock-api/v1/'
+
+VUE_APP_BASE_API = '/api'
+#Signalr
+VUE_APP_SIGNALR_SERVER = '/signalr-hubs'
+
+VUE_APP_BASE_IDENTITY_SERVICE = '/api/identity'
+
+VUE_APP_BASE_IDENTITY_SERVER = '/connect'
+
+VUE_APP_TENANT_NAME = ''
+VUE_APP_CLIENT_ID = 'vue-admin-element'
+VUE_APP_CLIENT_SECRET = '1q2w3e*'
diff --git a/vueJs/vue.config.js b/vueJs/vue.config.js
new file mode 100644
index 000000000..fb9a2f343
--- /dev/null
+++ b/vueJs/vue.config.js
@@ -0,0 +1,120 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path')
+
+// If your port is set to 80,
+// use administrator privileges to execute the command line.
+// For example, on Mac: sudo npm run / sudo yarn
+const devServerPort = 9527 // TODO: get this variable from setting.ts
+const name = 'Vue Typescript Admin' // TODO: get this variable from setting.ts
+
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'production' ? '/vue-typescript-admin-template/' : '/',
+  lintOnSave: process.env.NODE_ENV === 'development',
+  productionSourceMap: false,
+  devServer: {
+    port: devServerPort,
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    progress: false,
+    proxy: {
+      // change xxx-api/login => /mock-api/v1/login
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      [process.env.VUE_APP_BASE_IDENTITY_SERVER]: {
+        // IdentityServer4 address
+        target: 'http://localhost:44385',
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_IDENTITY_SERVER]: ''
+        }
+      },
+      [process.env.VUE_APP_SIGNALR_SERVER]: {
+        // api gateway address websocket protocol
+        target: 'ws://localhost:30000',
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_SIGNALR_SERVER]: ''
+        },
+        logLevel: 'debug'
+      },
+      [process.env.VUE_APP_BASE_API]: {
+        // api gateway address
+        target: 'http://localhost:30000',
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        },
+        logLevel: 'debug'
+      }
+    }
+  },
+  pwa: {
+    name: name,
+    workboxPluginMode: 'InjectManifest',
+    workboxOptions: {
+      swSrc: path.resolve(__dirname, 'src/pwa/service-worker.js')
+    }
+  },
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'scss',
+      patterns: [
+        path.resolve(__dirname, 'src/styles/_variables.scss'),
+        path.resolve(__dirname, 'src/styles/_mixins.scss')
+      ]
+    }
+  },
+  chainWebpack(config) {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    config.set('name', name)
+
+    // https://webpack.js.org/configuration/devtool/#development
+    config
+      .when(process.env.NODE_ENV === 'development',
+        config => config.devtool('cheap-eval-source-map')
+      )
+
+    // remove vue-cli-service's progress output
+    config.plugins.delete('progress')
+    // replace with another progress output plugin to solve the this bug:
+    // https://github.com/vuejs/vue-cli/issues/4557
+    config.plugin('simple-progress-webpack-plugin')
+      .use(require.resolve('simple-progress-webpack-plugin'), [{
+        format: 'compact'
+      }])
+
+    config
+      .when(process.env.NODE_ENV !== 'development',
+        config => {
+          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: path.resolve(__dirname, 'src/components'),
+                  minChunks: 3, //  minimum common number
+                  priority: 5,
+                  reuseExistingChunk: true
+                }
+              }
+            })
+          config.optimization.runtimeChunk('single')
+        }
+      )
+  }
+}