updated Dockerfile

frontend/.dockerignore

@@ -0,0 +1 @@
+node_modules/

frontend/.env.production

@@ -1,2 +1,2 @@
 NODE_ENV='production'
-VUE_APP_BASE_URL='http://114.67.75.98:8000/api'
+VUE_APP_BASE_URL='http://localhost:8000/api'

frontend/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:8.16.0-alpine AS frontend-build
+
+ADD . /app
+WORKDIR /app
+
+# install frontend
+RUN npm install -g yarn \
+	&& yarn install --registry=https://registry.npm.taobao.org
+
+RUN npm run build:prod
+
+FROM alpine
+
+#RUN apk update
+RUN apk add nginx
+COPY --from=frontend-build /app/dist /app/dist
+COPY --from=frontend-build /app/conf/crawlab.conf /etc/nginx/conf.d
+#RUN nginx -s start
+#COPY ./dist /usr/share/nginx/html
+
+#EXPOSE 80
+#EXPOSE 8080
+

frontend/conf/crawlab.conf

@@ -0,0 +1,5 @@
+server {
+    listen  8080;
+    root    /app/dist;
+    index   index.html;
+}

frontend/src/views/layout/components/Navbar.vue

@@ -4,7 +4,7 @@
     <breadcrumb class="breadcrumb"/>
     <el-dropdown class="avatar-container" trigger="click">
       <span class="el-dropdown-link">
-        {{$t('User')}}
+        {{username}}
         <i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown" class="user-dropdown">
@@ -19,12 +19,12 @@
         <i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item @click.native="setLang('en')">
-          <span>English</span>
-        </el-dropdown-item>
         <el-dropdown-item @click.native="setLang('zh')">
           <span>中文</span>
         </el-dropdown-item>
+        <el-dropdown-item @click.native="setLang('en')">
+          <span>English</span>
+        </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </div>
@@ -44,7 +44,12 @@ export default {
     ...mapGetters([
       'sidebar',
       'avatar'
-    ])
+    ]),
+    username () {
+      if (!this.$store.getters['user/userInfo']) return this.$t('User')
+      if (!this.$store.getters['user/userInfo'].username) return this.$t('User')
+      return this.$store.getters['user/userInfo'].username
+    }
   },
   methods: {
     toggleSideBar () {