refine config

.env.development

@@ -1,9 +1,14 @@
-VUE_APP_BASE_API = '/api'
+# just a flag
 ENV = 'development'
 
-// With this configuration, vue-cli uses babel-plugin-dynamic-import-node
-// It only does one thing by converting all import() to require()
-// So that all asynchronous components can be import synchronously using this plugin
-// This configuration can significantly increase the speed of hot updates when you have a large number of pages
-// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+# base api
+VUE_APP_BASE_API = '/dev-api'
+
+# 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().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -1,2 +1,6 @@
-VUE_APP_BASE_API = '/api'
+# just a flag
 ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+

.env.staging

@@ -1,3 +1,8 @@
-NODE_ENV=production
-VUE_APP_BASE_API = '/api'
+NODE_ENV = production
+
+# just a flag
 ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+

.eslintignore

@@ -1,3 +1,4 @@
 build/*.js
 config/*.js
 src/assets
+public

src/components/Dropzone/index.vue

@@ -237,7 +237,7 @@ export default {
 
     .dropzone .dz-preview:hover .dz-image img {
         transform: none;
-        -webkit-filter: none;
+        filter: none;
         width: 100%;
         height: 100%;
     }

vue.config.js

@@ -1,23 +1,22 @@
 'use strict'
-
 const path = require('path')
+const pkg = require('./package.json')
 
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = 'vue-element-admin'
+const name = pkg.name || 'vue-element-admin' // page title
 const port = 9527 // dev port
 
-// Explanation of each configuration item You can find it in https://cli.vuejs.org/config/
+// All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
-   * You can set by yourself according to actual condition
-   * You will need to set this if you plan to deploy your site under a sub path,
-   * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
-   * then assetsPublicPath should be set to "/bar/".
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
    * In most cases please use '/' !!!
-   * Detail https://cli.vuejs.org/config/#publicPath
+   * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: '/',
   outputDir: 'dist',
@@ -32,11 +31,13 @@ module.exports = {
       errors: true
     },
     proxy: {
-      '/api': {
+      // Detail: https://cli.vuejs.org/config/#devserver-proxy
+      // xxx-api/login => mock/login
+      [process.env.VUE_APP_BASE_API]: {
         target: `http://localhost:${port}/mock`,
         changeOrigin: true,
         pathRewrite: {
-          '^/api': ''
+          ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       }
     },
@@ -58,7 +59,7 @@ module.exports = {
     }
   },
   configureWebpack: {
-    // We provide the app's title in Webpack's name field, so that
+    // 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: {
@@ -94,6 +95,7 @@ module.exports = {
         return options
       })
       .end()
+
     config
       .when(process.env.NODE_ENV === 'development',
         config => config.devtool('cheap-source-map')