chore: 添加多环境打包配置

.env

@@ -0,0 +1 @@
+VUE_APP_PORTAL_HOST='http://p.seecoder.cn'

.env.dev

@@ -0,0 +1,3 @@
+NODE_ENV = development
+VUE_APP_API_URL = 'http://localhost:8080'
+VUE_APP_ENV_NAME = '[开发环境]'

.env.dev-mock

@@ -0,0 +1,3 @@
+NODE_ENV = development-mock
+VUE_APP_API_URL = 'http://localhost:4000/api'
+VUE_APP_ENV_NAME = '[Mock开发环境]'

.env.prod

@@ -0,0 +1,3 @@
+NODE_ENV = production
+VUE_APP_API_URL = 'http://devcloud.seec.seecoder.cn/api'
+VUE_APP_ENV_NAME = ''

.env.test

@@ -0,0 +1,3 @@
+NODE_ENV = test
+VUE_APP_API_URL = 'http://devcloud-test.seec.seecoder.cn/api'
+VUE_APP_ENV_NAME = '[线上测试环境]'

README.md

@@ -1,11 +1,23 @@
 # devcloud-frontend
 
+## 命令介绍
+
 请使用`yarn`作为包管理器
 
 `yarn mock`启动`mock server`。
 
-`yarn serve`启动本地服务.
+`yarn serve`启动本地服务，需搭配本地运行在8080端口的后端服务。
+
+`yarn serve:mock` 启动本地服务，需搭配`mock server`进行使用。
+
+`yarn build:test`执行线上测试环境打包构建。
+
+`yarn build:prod`执行生产环境打包构建。
+
+`yarn lint --fix`进行格式化。
+
+## 环境变量说明
 
-`yarn build`执行构建。
+`.env`文件中，声明单点登录门户网站`host`。
 
-`yarn lint`进行格式化。
+`.env.[mode]`文件中，声明当前环境的接口地址`API_URL`与环境名`ENV_NAME`。

mock/index.js

@@ -20,7 +20,9 @@ app.use((req, res, next) => {
 
 const prefix = '/api';
 
-app.use(`${prefix}/user`, require('./routers/user'));
+app.use(`${prefix}/users`, require('./routers/user'));
 app.use(`${prefix}/project`, require('./routers/project'));
 
 app.listen(4000);
+
+console.log('Mock Server is now running at port 4000.');

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --port 3000",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service serve --port 3000 --mode dev",
+    "serve:mock": "vue-cli-service serve --port 3000 --mode dev-mock",
+    "build:test": "vue-cli-service build --mode test",
+    "build:prod": "vue-cli-service build --mode prod",
     "lint": "vue-cli-service lint",
     "mock": "node mock/index.js"
   },

src/api/prefix.ts

@@ -1,5 +1,5 @@
 export const PIPELINE_PREFIX = '/pipelines';
 export const DEPLOYMENT_PREFIX = '/deployments';
-export const USER_PREFIX = '/user';
+export const USER_PREFIX = '/users';
 export const TREE_PREFIX = '/tree';
 export const PROJECT_PREFIX = '/project';

src/utils/axios.ts

@@ -9,19 +9,8 @@ const { destroyToken } = TokenDispatcher;
 // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
-const getBaseUrl = () => {
-  switch (process.env.NODE_ENV) {
-    case 'development':
-      return 'http://localhost:4000/api';
-    case 'production':
-      return process.env.baseURL || process.env.apiUrl || '';
-    default:
-      return process.env.baseURL || process.env.apiUrl || '';
-  }
-};
-
 const config = {
-  baseURL: getBaseUrl(),
+  baseURL: process.env.VUE_APP_API_URL,
   // timeout: 60 * 1000, // Timeout
   // withCredentials: true, // Check cross-site Access-Control
 };

src/views/Login.vue

@@ -11,7 +11,7 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   methods: {
     async login() {
-      window.location = `http://p.seecoder.cn/api/interaction?scope=openid&client_id=seec-seec&redirect_uri=${encodeURI(
+      window.location = `${process.env.VUE_APP_PORTAL_HOST}/api/interaction?scope=openid&client_id=seec-seec&redirect_uri=${encodeURI(
         `http://${window.location.host}/`,
       )}` as unknown as Location;
     },

vue.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  chainWebpack: (config) => {
+    config.plugin('html').tap((args) => {
+      args[0].title = `${process.env.VUE_APP_ENV_NAME}Devcloud | SEEC`;
+      return args;
+    });
+  },
+};