📦 打包配置

.env.development

@@ -20,7 +20,7 @@ VITE_MOCK_DEV_SERVER=true
 VITE_STRICT_PORT=false
 
 # 是否启用屏幕转vw适配，可以选择 postcss-px-to-viewport-8-plugin || autofit
-VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit"
+VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="postcss-px-to-viewport-8-plugin"
 
 # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
 VITE_CDN=false

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+fakeServer
 dist-ssr
 *.local
 

.gitlab-ci.yml

@@ -0,0 +1,54 @@
+# 定义CI/CD流水线的阶段
+stages:
+  - build # 第一阶段：构建应用程序
+  - build-docker # 第二阶段：构建Docker镜像
+  - deploy # 第三阶段：部署应用程序
+
+cache: # 缓存内容
+  paths:
+    - node_modules/
+    - docker/dist/
+
+# 定义全局变量
+variables:
+  CONTAINER_NAME: 'central-monitor' # Docker容器名称
+  DOCKER_TAG: '1.0.0' # Docker镜像标签版本
+
+# 构建任务
+build-job:
+  stage: build # 指定此任务属于build阶段
+  script:
+    # 打印编译开始信息
+    - echo "Compiling the code..."
+    # 使用Maven编译Java项目，跳过测试
+    - npm i -g pnpm && pnpm i && pnpm build
+    # 打印编译完成信息
+    - echo "Compile complete."
+    # 从Docker Hub拉取OpenJDK基础镜像
+    - docker pull nginx:1.27.3
+    # 打印拉取完成信息
+    - echo "docker pull complete."
+    # 使用Dockerfile构建Docker镜像，并打上标签
+    - cd docker && docker build -f Dockerfile -t $CONTAINER_NAME:$DOCKER_TAG .
+    # 打印构建成功信息
+    - echo "Application successfully deployed."
+
+# 部署任务
+deploy-job:
+  stage: deploy # 指定此任务属于deploy阶段
+  environment: production # 指定部署环境为production
+  script:
+    # 打印部署开始信息
+    - echo "Deploying application..."
+    # 停止正在运行的容器（如果存在），|| true确保命令失败不会中断脚本
+    - docker stop $CONTAINER_NAME || true
+    # 删除容器（如果存在）
+    - docker rm $CONTAINER_NAME || true
+    # 运行新的Docker容器
+    # -d: 后台运行
+    # -p: 端口映射（7070和8000）
+    # --name: 容器名称
+    # --restart always: 总是自动重启
+    - docker run -d -p 8800:80 --name $CONTAINER_NAME --restart always $CONTAINER_NAME:$DOCKER_TAG
+    # 打印部署成功信息
+    - echo "Application successfully deployed."

.npmrc

@@ -0,0 +1 @@
+optional-depenencies=true

build/buildEnv.ts

@@ -31,7 +31,7 @@ export const buildEnv = (): BuildOptions => {
     // 规定触发警告的 chunk 大小, 当某个代码分块的大小超过该限制时，Vite 会发出警告
     chunkSizeWarningLimit: 2000,
     rollupOptions: {
-      external: ['md-editor-v3', 'echarts'],
+      external: ['echarts', 'fsevents'],
       input: {
         // @ts-ignore
         index: pathResolve('../index.html', import.meta.url),

build/plugins.ts

@@ -57,7 +57,10 @@ const useMock = (mode: string) => {
         logger: true,
         include: 'mock',
         infixName: false,
-        enableProd: true, // 线上支持mock
+        enableDev: true,
+        // enableProd: true, // 线上支持mock
+        // build: true,
+        // http2: true,
       })
     : null;
 };

package.json

@@ -99,6 +99,18 @@
       "allowedVersions": {
         "eslint": "9"
       }
+    },
+    "packageExtensions": {
+      "rollup@*": {
+        "optionalDependencies": {
+          "fsevents": "*"
+        }
+      }
     }
-  }
+  },
+  "onlyBuiltDependencies": [
+    "@parcel/watcher",
+    "esbuild",
+    "vue-demi"
+  ]
 }

pnpm-lock.yaml

@@ -4,6 +4,8 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+packageExtensionsChecksum: sha256-P0QlM8/kU0utlq/9p9JMVRZfIyZpKq+o9SyM/Bghnd4=
+
 importers:
 
   .:

src/App.vue

@@ -1,3 +1,5 @@
+<script lang="ts" setup></script>
+
 <template>
   <router-view v-slot="{ Component, route }">
     <transition
@@ -18,11 +20,10 @@
   </router-view>
 </template>
 
-<script lang="ts" setup></script>
 <style lang="scss">
 #app {
   width: 100%;
-  //height: 1080px;
-  height: 100%;
+  height: 1080px;
+  // height: 100%;
 }
 </style>

src/layout/index.vue

@@ -11,7 +11,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="w-full h-full">
     <div class="w-full flex items-center justify-center flex-wrap gap-x-4 text-4xl p-2 mt-4">
       <div class="w-full flex items-center justify-center mb-4">
         <button>清除默认样式的按钮</button>