feat： 更新

env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-    readonly MODE: string
     readonly VITE_APP_NAME: string
     // 更多环境变量...
 }

env/.env

@@ -1,3 +1,3 @@
 VITE_APP_NAME=vue3培训学习项目
 
-APP_PROXY_TARGET=https://xtbg.gdzwfw.gov.cn
+NODE_APP_PROXY_TARGET=https://xtbg.gdzwfw.gov.cn

env/.env.test

@@ -1,2 +1,3 @@
+VITE_APP_NAME=vue3培训学习项目-测试
 VITE_APP_XXX=哈哈哈哈
-APP_PROXY_TARGET=https://xtbgtest.digitalgd.com.cn
+NODE_APP_PROXY_TARGET=https://xtbgtest.digitalgd.com.cn

package.json

@@ -24,13 +24,11 @@
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node18": "^18.2.2",
     "@types/node": "^18.18.5",
-    "@vitejs/plugin-legacy": "^5.2.0",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.4.0",
-    "cross-env": "^7.0.3",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "npm-run-all2": "^6.1.1",

proxy.config.ts

@@ -1,8 +1,7 @@
-const { APP_PROXY_TARGET } = process.env;
-const proxyTarget = APP_PROXY_TARGET || "";
-
-console.log("--------------", APP_PROXY_TARGET)
-const proxyTable = {
+const proxyConfig = (env: Record<string, string>) => {
+  const { NODE_APP_PROXY_TARGET } = env;
+  const proxyTarget = NODE_APP_PROXY_TARGET || "";
+  const proxyTable = {
     "/zuul": {
       target: proxyTarget,
       changeOrigin: true
@@ -23,6 +22,8 @@ const proxyTable = {
       target: proxyTarget,
       changeOrigin: true
     }
+  };
+  return proxyTable;
 };
 
-export default proxyTable;
+export default proxyConfig;

src/components/VError.vue

@@ -1,12 +1,19 @@
 <template>
     <div class="error">
         <img src="../assets/meme_sad_frog.svg" width="200px" />
-        <p>加载组件出错了！</p>
+        <p>{{ massage }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
 
+interface errorProps {
+    massage?: string
+}
+
+withDefaults(defineProps<errorProps>(), {
+    massage: "加载出错了！"
+});
 </script>
 
 <style scoped lang="less">

src/components/async/VAsyncComp2.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="asynccomp">
         <img src="@/assets/meme_salt_bae.svg" />
-        <p>嘿嘿～</p>
+        <p>优雅～</p>
     </div>
 </template>
 

src/components/async/VAsyncComp3.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="asynccomp">
         <img src="@/assets/meme_hide_the_pain_harold.svg" />
-        <p>嘿嘿～</p>
+        <p>幸福～</p>
     </div>
 </template>
 

src/main.ts

@@ -1,7 +1,7 @@
 import "./styles/index.less";
 import { createApp } from "vue";
 import App from "./App.vue";
-import router from "./router/guards";
+import router from "./router";
 import pinia from "./stores/pinia";
 import { install } from "./installComponents";
 
@@ -11,5 +11,3 @@ app.use(pinia);
 app.use(router);
 install(app);
 app.mount("#app");
-
-console.log("-------", import.meta.env);

src/router/routes.ts

@@ -247,6 +247,18 @@ const routes = [
     name: "router",
     meta: { title: "路由router" },
     children: [
+      {
+        path: "/router/transition",
+        name: "routerTransition",
+        meta: { title: "路由过渡动效" },
+        component: () => import("@/views/router/RouterTransition.vue")
+      },
+      {
+        path: "/router/dynamic",
+        name: "routerDynamic",
+        meta: { title: "动态路由" },
+        component: () => import("@/views/router/RouterDynamic.vue")
+      },
       {
         path: "/router/guard",
         name: "routerGuard",
@@ -266,6 +278,15 @@ const routes = [
     name: "noaccess",
     props: true,
     component: () => import("@/views/error/NoAccess.vue")
+  },
+  { 
+    path: "/404", 
+    name: "404", 
+    component: () => import("@/views/error/Error404.vue") 
+  },
+  { 
+    path: "/:catchAll(.*)", 
+    redirect: "/404"
   }
 ];
 

src/views/component/AsyncComponent.vue

@@ -32,14 +32,6 @@ const showAsyncComponent = () => {
 const AsyncComp = defineAsyncComponent({
     // 加载函数
     loader: () => import("@/components/async/VAsyncComp1.vue"),
-    // loader: () => {
-    //     // const comp = () => import("../../components/async/VAsyncComp1.vue");
-    //     return new Promise(resolve => {
-    //         setTimeout(() => {
-    //             resolve(() => import("../../components/async/VAsyncComp1.vue"));
-    //         }, 2000);
-    //     });
-    // },
     // 加载异步组件时使用的组件
     loadingComponent: VLoading,
     // 展示加载组件前的延迟时间，默认为 200ms

src/views/error/Error404.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <VError massage="你的页面飞走了" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import VError from "@/components/VError.vue";
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/provideInject/InjectBase.vue

@@ -10,11 +10,12 @@
 
 <script setup lang="ts">
 import { inject } from "vue";
+import type { Ref } from "vue";
 
-const num = inject("num");
+const num = inject<Ref>("num");
 
 const clickHander = () => {
-    num.value++;
+    if (num) num.value++;
 };
 </script>
 
@@ -22,8 +23,9 @@ const clickHander = () => {
 <style scoped lang="less">
 div {
     border: 3px solid #aaa;
-    padding:10px;
+    padding: 10px;
 }
+
 button {
     padding: 8px;
 }

src/views/provideInject/ProvideBase.vue

@@ -15,7 +15,7 @@ import { ref, provide } from "vue";
 import InjectBase from "./InjectBase.vue";
 
 
-const count = ref(0);
+const count = ref<number>(0);
 provide("num", count);
 
 const clickHander = () => {

src/views/provideInject/ProvideReadonly.vue

@@ -15,7 +15,7 @@ import { ref, provide, readonly } from "vue";
 import InjectBase from "./InjectBase.vue";
 
 
-const count = ref(0);
+const count = ref<number>(0);
 provide("num", readonly(count));
 
 const clickHander = () => {

src/views/router/RouterDynamic.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <p>
+            <button @click="addHandler">添加</button>
+        </p>
+        <br />
+        <p>
+            <button @click="removeHandler">删除</button>
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// import { ref } from "vue";
+import router from "@/router";
+import type { RouteRecordRaw } from "vue-router";
+
+const routerItem: RouteRecordRaw = {
+    path: "/heihei", name: "heihei", component: () => import("../../components/async/VAsyncComp1.vue")
+};
+
+const addHandler = () => {
+    router.addRoute(routerItem);
+};
+
+const removeHandler = () => {
+    router.removeRoute("heihei");
+};
+
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 8px;
+}
+</style>

src/views/router/RouterTransition.vue

@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <div>
+            <button v-for="(item, index) in components" :key="`${item.name}_${index}`" @click="clickButton(index)">按钮{{ index
+                + 1 }}</button>
+        </div>
+        <br />
+        <transition  :enter-active-class="`animate__animated ${atciveTransition}`">
+            <component :is="renderComponent" />
+        </transition>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import VAsyncComp1 from "@/components/async/VAsyncComp1.vue";
+import VAsyncComp2 from "@/components/async/VAsyncComp2.vue";
+import VAsyncComp3 from "@/components/async/VAsyncComp3.vue";
+
+const components = [
+    {
+        name: VAsyncComp1.name || VAsyncComp1.__name,
+        component: VAsyncComp1,
+        transition: "animate__fadeInUp"
+    },
+    {
+        name: VAsyncComp2.name || VAsyncComp2.__name,
+        component: VAsyncComp2,
+        transition: "animate__bounceIn"
+    },
+    {
+        name: VAsyncComp3.name || VAsyncComp3.__name,
+        component: VAsyncComp3,
+        transition: "animate__rotateIn"
+    }
+];
+
+const activeButton = ref(0);
+const clickButton = (index: number) => {
+    activeButton.value = index;
+};
+
+const renderComponent = computed(() => {
+   return components[activeButton.value].component;
+});
+const atciveTransition = computed(() => {
+   return components[activeButton.value].transition;
+});
+
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 8px;
+}
+@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
+</style>

vite.config.ts

@@ -1,31 +1,23 @@
 import { fileURLToPath, URL } from "node:url";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import legacy from "@vitejs/plugin-legacy";
 import VueSetupExtend from "vite-plugin-vue-setup-extend";
 import proxyConfig from "./proxy.config";
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  // 根据当前工作目录中的 `mode` 加载 .env 文件
+  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
+  const envDir = `${process.cwd()}/env`;
+  const env = loadEnv(mode, envDir, "NODE_APP_");
+  return {
     base: "./",
     envDir: "./env",
     plugins: [
       vue(),
       vueJsx(),
-    VueSetupExtend(),
-    
-    legacy({
-      // targets: ["defaults", "not IE 11"],
-      targets: {
-        "chrome": "120"
-      },
-      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
-      renderLegacyChunks: true,
-      polyfills: [
-        "es.array.to-reversed"
-      ]
-    })
+      VueSetupExtend()
     ],
     resolve: {
       alias: {
@@ -33,6 +25,24 @@ export default defineConfig({
       }
     },
     server: {
-    proxy: proxyConfig
+      proxy: proxyConfig(env)
     }
+  };
 });
+// export default defineConfig({
+//   base: "./",
+//   envDir: "./env",
+//   plugins: [
+//     vue(),
+//     vueJsx(),
+//     VueSetupExtend()
+//   ],
+//   resolve: {
+//     alias: {
+//       "@": fileURLToPath(new URL("./src", import.meta.url))
+//     }
+//   },
+//   server: {
+//     proxy: proxyConfig
+//   }
+// });