123

vite-demo/environments/proxy-config.json

+{
+  "env": "dev",
+  "target": "http://localhost:3000"
+}
\ No newline at end of file

vite-demo/environments/proxy.js

+// proxy.js
+const fs = require('fs')
+const path = require('path')
+
+const encoding = 'utf-8'
+/**
+ * 获取配置文件内容 getContent('proxy-config.json')
+ * @param filename env.json
+ * @returns {string}
+ */
+const getContent = filename => {
+    const dir = path.resolve(process.cwd(), 'environments')
+    const target = fs.readFileSync(path.resolve(dir, filename), { encoding })
+    console.log('target',target);
+    return target
+}
+
+const jsonParse = obj => {
+    return Function('"use strict";return (' + obj + ')')()
+}
+
+/**
+ * 获取配置选项 getConfig()
+ * @returns {{}|*}
+ */
+const getConfig = () => {
+    try {
+        console.log('getContent(\'proxy-config.json\')',getContent('proxy-config.json'));
+        return jsonParse(getContent('proxy-config.json'))
+    } catch (e) {
+        return {}
+    }
+}
+
+module.exports = {
+    proxy: {
+        // 接口匹配规则自行修改
+        // ['/my-api']: {
+        //     target: 'that must have a empty placeholder', // 这里必须要有字符串来进行占位
+        //     changeOrigin: true,
+        //     router: () => (getConfig() || {}).target || ''
+        // },
+        '/ReportApi': {
+            target: 'http://192.168.145.101:13000',
+            // target: 'http://localhost:3000',
+            changeOrigin: true,//允许跨域
+            rewrite: (path) => path.replace(/^\/api/, ''),
+            router: () => (getConfig() || {}).target || ''
+        },
+        '/api': {
+            target: 'localhost',
+            changeOrigin: true,//允许跨域
+            rewrite: (path) => path.replace(/^\/api/, ''),
+            router: () => (getConfig() || {}).target || ''
+        },
+    }
+}

vite-demo/mock/user.js

@@ -33,7 +33,7 @@ module.exports = [
         type: 'post',
         response: config => {
             const {username} = config.body
-            console.log('mock', config.body);
+            // console.log('mock', config.body);
             const token = tokens[username]
             console.log(token);
             if (!token) {
@@ -54,7 +54,7 @@ module.exports = [
         url: '/api/user/info',
         type: 'get',
         response: config => {
-            console.log('/api/user/info - config',config);
+            // console.log('/api/user/info - config',config);
             const {token} = config.headers
             const info = users[token]
 

vite-demo/package.json

@@ -37,6 +37,7 @@
     "crypto-js": "^4.1.1",
     "mockjs": "^1.1.0",
     "vite": "^2.9.0",
-    "vite-plugin-mock": "^2.9.6"
+    "vite-plugin-mock": "^2.9.6",
+    "vue-virtual-scroller": "^1.1.2"
   }
 }

vite-demo/src/api/list.js

@@ -6,4 +6,18 @@ export function tabelAll(data) {
         method: 'get',
         data
     })
+}
+
+export function myApi() {
+    return request({
+        url: '/api/my-api',
+        method: 'get'
+    })
+}
+
+export function getLaoWu666() {
+    return request({
+        url: '/ReportApi/impCostEnergy/getLaoWu666',
+        method: 'get'
+    })
 }
\ No newline at end of file

vite-demo/src/router/backRouter.js

@@ -138,6 +138,15 @@ export default [
                 },
                 component: '/views/MyUI/UI.vue',
             },
+            {
+                path: '/dynamicAgent',
+                name: 'dynamicAgent',
+                title: '动态代理',
+                meta: {
+                    title: '动态代理',
+                },
+                component: '/views/tool/dynamicAgent.vue',
+            },
         ]
     },
     {

vite-demo/src/views/skills/components/responsive/index.vue

+<template>
+    <div id="responsiveApp"></div>
+</template>
+
+<script>
+    export default {
+        name: "responsive",
+
+        setup() {
+
+            return {}
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

vite-demo/src/views/skills/vue3/fnApi.vue

 <template>
 
-  <a-tabs v-model:activeKey="activeKey" type="card">
-    <a-tab-pane key="1" tab="jsx的使用和插槽传参">
-      <jsx></jsx>
-    </a-tab-pane>
-    <a-tab-pane key="2" tab="vue中的attrs" force-render>
-      <a-tabs tab-position="left">
-        <a-tab-pane key="1" tab="Tab 1">
-          <attrsVue3></attrsVue3>
+    <a-tabs v-model:activeKey="activeKey" type="card">
+        <a-tab-pane key="1" tab="jsx的使用和插槽传参">
+            <jsx></jsx>
         </a-tab-pane>
-        <a-tab-pane key="2" tab="$attrs">
-          <attrs/>
+        <a-tab-pane key="2" tab="vue中的attrs" force-render>
+            <a-tabs tab-position="left">
+                <a-tab-pane key="1" tab="Tab 1">
+                    <attrsVue3></attrsVue3>
+                </a-tab-pane>
+                <a-tab-pane key="2" tab="$attrs">
+                    <attrs/>
+                </a-tab-pane>
+            </a-tabs>
         </a-tab-pane>
-      </a-tabs>
-    </a-tab-pane>
-    <a-tab-pane key="3" tab="compositionApi">
-      <compositionAPI/>
-    </a-tab-pane>
-    <a-tab-pane key="4" tab="插槽">
-      <slots></slots>
-
-      <FancyButton>
-        2444
-        <span style="color:red">Click me!</span>
-        <template #header="{count}">
-          <div>
-            作用域插槽 -
-            <p>{{ count }}</p>
-          </div>
-          <tree></tree>
-        </template>
-      </FancyButton>
-    </a-tab-pane>
+        <a-tab-pane key="3" tab="compositionApi">
+            <compositionAPI/>
+        </a-tab-pane>
+        <a-tab-pane key="4" tab="插槽">
+            <slots></slots>
 
-  </a-tabs>
+            <FancyButton>
+                2444
+                <span style="color:red">Click me!</span>
+                <template #header="{count}">
+                    <div>
+                        作用域插槽 -
+                        <p>{{ count }}</p>
+                    </div>
+                    <tree></tree>
+                </template>
+            </FancyButton>
+        </a-tab-pane>
+        <a-tab-pane key="5" tab="Vue3响应式系统-源码">
+            <responsive></responsive>
+        </a-tab-pane>
+    </a-tabs>
 
 </template>
 
 <script>
-import {ref} from 'vue'
-// jsx
-import jsx from '../components/jsx/index.vue'
-import attrsVue3 from "../components/attrs/vue3-attrs/index.vue";
-// 通过attrs传递参数
-import attrs from '../components/attrs/index.vue'
-import compositionAPI from "../components/compositionAPI.vue";
-// 插槽
-import slots from '../components/slots/index2.vue'
-import FancyButton from '../components/slots/FancyButton.vue'
-import tree from '../components/slots/tree.vue'
-export default {
-  name: "createVNode",
-  components: {
-    jsx,
-    attrsVue3,
-    attrs,
-    compositionAPI,
-    slots,
-    FancyButton,
-    tree
-  },
-  setup(props, {emit}) {
-    function edit(val) {
-      console.log('edit', 0);
-      // 对返回的值做一个包装
-      emit('edit', `${val}time`)
-    }
+    import {ref} from 'vue'
+    // jsx
+    import jsx from '../components/jsx/index.vue'
+    import attrsVue3 from "../components/attrs/vue3-attrs/index.vue";
+    // 通过attrs传递参数
+    import attrs from '../components/attrs/index.vue'
+    import compositionAPI from "../components/compositionAPI.vue";
+    // 插槽
+    import slots from '../components/slots/index2.vue'
+    import FancyButton from '../components/slots/FancyButton.vue'
+    import tree from '../components/slots/tree.vue'
+
+    import responsive from '../components/responsive/index.vue'
+
+    export default {
+        name: "createVNode",
+        components: {
+            jsx,
+            attrsVue3,
+            attrs,
+            compositionAPI,
+            slots,
+            FancyButton,
+            tree,
+            responsive
+        },
+        setup(props, {emit}) {
+            function edit(val) {
+                console.log('edit', 0);
+                // 对返回的值做一个包装
+                emit('edit', `${val}time`)
+            }
 
-    return {
-      edit,
-      activeKey: ref('4'),
+            return {
+                edit,
+                activeKey: ref('5'),
+            }
+        }
     }
-  }
-}
 </script>
 <!--https://blog.csdn.net/jason_renyu/article/details/122042249-->
 <style scoped>

vite-demo/src/views/tool/dynamicAgent.vue

+<template>
+    <a-button @click="myApiFn">发送</a-button>
+    <a-button @click="myApiFn2">发送</a-button>
+</template>
+
+<script>
+    import {myApi,getLaoWu666} from '@/api/list'
+
+    export default {
+        name: "dynamicAgent",
+        methods: {
+            myApiFn() {
+                console.log('myApi',myApi)
+                myApi().then(res => {
+                    console.log('res',res)
+                })
+            },
+            myApiFn2() {
+                console.log('myApi',myApi)
+                getLaoWu666().then(res => {
+                    console.log('res',res)
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

vite-demo/src/views/welcome/index.vue

 <template>
-    <div>welcome</div>
+    <div>
+        <div>welcome</div>
+        <demo></demo>
+    </div>
+
 
 </template>
 
 <script>
+    import demo from './demo.vue'
     export default {
         name: "index",
-        setup(){
-
+        components:{
+            demo
         }
     }
 </script>

vite-demo/vite.config.js

@@ -5,6 +5,8 @@ import * as path from 'path'
 // https://coding.imooc.com/learn/questiondetail/4a9DdYaWGp56lpe0.html
 // mock
 import {viteMockServe} from 'vite-plugin-mock'
+const dynamicProxy = require('./environments/proxy.js')
+console.log('dynamicProxy',dynamicProxy);
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
@@ -14,9 +16,11 @@ export default defineConfig({
         })
     ],
     server: {
-        port: 3000,
-        open: true,
-        proxy: {
+        port: 8888,
+        open: false,
+        proxy:dynamicProxy.proxy,
+        disableHostCheck: true,
+        // proxy: {
             // 代理配置
             // '/api': {
             //     target: 'http://localhost:3000',
@@ -24,13 +28,13 @@ export default defineConfig({
             //     secure:false,//解决自签名证书错误
             //     rewrite: (path) => path.replace(/^\/api/, ''),
             // },
-            '/Api': {
-                target: 'http://localhost:8080',
-                changeOrigin: true,//允许跨域
-                secure:false,//解决自签名证书错误
-                rewrite: (path) => path.replace(/^\/Api/, ''),
-            },
-        },
+            // '/Api': {
+            //     target: 'http://localhost:8080',
+            //     changeOrigin: true,//允许跨域
+            //     secure:false,//解决自签名证书错误
+            //     rewrite: (path) => path.replace(/^\/Api/, ''),
+            // },
+        // },
     },
 
     resolve: {