[Feature][UI Next] Change how env is used. (#8221)

dolphinscheduler-ui-next/.env.development

@@ -15,4 +15,4 @@
 
 NODE_ENV = development
 
-VITE_APP_WEB_URL = ''
+VITE_APP_DEV_WEB_URL = ''

dolphinscheduler-ui-next/.env.production

@@ -15,4 +15,4 @@
 
 NODE_ENV = production
 
-VITE_APP_WEB_URL = ''
+VITE_APP_PROD_WEB_URL = ''

dolphinscheduler-ui-next/src/layouts/content/index.tsx

@@ -64,7 +64,7 @@ const Content = defineComponent({
         state.isShowSide = menuStore.getShowSideStatus
         sideKey.value = route.matched[1]?.path
       },
-      {immediate: true}
+      { immediate: true }
     )
 
     const getSideMenu = (state: any) => {
@@ -101,7 +101,10 @@ const Content = defineComponent({
         </NLayoutHeader>
         <NLayout has-sider position='absolute' style='top: 65px'>
           {this.isShowSide && (
-            <SideBar sideMenuOptions={this.sideMenuOptions} sideKey={this.sideKey} />
+            <SideBar
+              sideMenuOptions={this.sideMenuOptions}
+              sideKey={this.sideKey}
+            />
           )}
           <NLayoutContent native-scrollbar={false} style='padding: 16px 22px'>
             <router-view key={this.$route.fullPath} />

dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts

@@ -266,15 +266,11 @@ export function useDataList() {
 
   const changeHeaderMenuOptions = (state: any) => {
     state.headerMenuOptions = state.menuOptions.map(
-      (item: {
-        label: string
-        key: string
-        icon: any
-      }) => {
+      (item: { label: string; key: string; icon: any }) => {
         return {
           label: item.label,
           key: item.key,
-          icon: item.icon,
+          icon: item.icon
         }
       }
     )

dolphinscheduler-ui-next/src/service/service.ts

@@ -23,7 +23,10 @@ import { useUserStore } from '@/store/user/user'
 const userStore = useUserStore()
 
 const baseRequestConfig: AxiosRequestConfig = {
-  baseURL: import.meta.env.VITE_APP_WEB_URL + '/dolphinscheduler',
+  baseURL:
+    import.meta.env.MODE === 'development'
+      ? '/dolphinscheduler'
+      : import.meta.env.VITE_APP_PROD_WEB_URL + '/dolphinscheduler',
   timeout: 10000,
   transformRequest: (params) => {
     if (_.isPlainObject(params)) {

dolphinscheduler-ui-next/src/views/projects/workflow/relation/index.tsx

@@ -18,8 +18,8 @@
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
-import {NSelect, NButton, NIcon, NSpace, NTooltip} from 'naive-ui'
-import {ReloadOutlined, EyeOutlined, EditOutlined} from '@vicons/antd'
+import { NSelect, NButton, NIcon, NSpace, NTooltip } from 'naive-ui'
+import { ReloadOutlined, EyeOutlined, EditOutlined } from '@vicons/antd'
 import { useRelation } from './use-relation'
 import Card from '@/components/card'
 import Graph from './components/Graph'

dolphinscheduler-ui-next/vite.config.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import viteCompression from 'vite-plugin-compression'
@@ -49,5 +49,13 @@ export default defineConfig({
       // resolve vue-i18n warning: You are running the esm-bundler build of vue-i18n.
       'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
     }
+  },
+  server: {
+    proxy: {
+      '/dolphinscheduler': {
+        target: loadEnv('development', './').VITE_APP_DEV_WEB_URL,
+        changeOrigin: true
+      }
+    }
   }
 })