vue3前端后端地址可配置方案

news2025/6/9 19:05:44

在开发vue3项目过程中，需要切换不同的服务器部署，代码中配置的服务需要可灵活配置，不随着run npm build把网址打包到代码资源中，不然每次切换都需要重新run npm build。需要一个配置文件可以修改服务地址，而打包的代码资源直接copy就可以了。

记录一下下面的方法

vue3项目跟路径下创建proxy.js，并且地址写在proxy.js中，挂载到window对象上

window.APP_config = {
    apiBaseURL: 'http://localhost:8080',
    wsBaseURL: 'ws://localhost:8080/ws',
  };

项目的index.html中延迟加载proxy.js文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>KXJL Chat OCR</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <script src="/proxy.js" defer></script>
  </body>
</html>

main.js中注入，需要监听dom事件，只有dom加载完成才能调用window对象的属性

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/router.js'
import ElementPlus  from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from "axios"

var app = createApp(App)

// 使用 DOMContentLoaded 事件确保 DOM 加载完成后再访问 window.APP_config
document.addEventListener('DOMContentLoaded', () => {
    if (window.APP_config) {
      // 注入配置到 Vue 应用中
      app.provide('APP_config', window.APP_config);
    }
  
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
      }
    router.isReady().then(() => {
    if (router.currentRoute.value.path !== '/') {
        router.push('/');
    }
    });
    app.provide('axios', axios)
    app.use(router)
    app.use(ElementPlus)
    app.mount('#app')
  });

其他任何地方可调用

import { ref, onMounted, onUnmounted, inject } from 'vue';
const APP_config = inject('APP_config');
console.log(APP_config)
const ws_url = APP_config.wsBaseURL    
console.log("ws_url", ws_url)

ws的调用

<template lang="">
    <div class="imgocrinfer">
        <div class="input">
        <div class="imgup">
            <el-upload
                class="upload-demo"
                drag
                action=""
                multiple
                :auto-upload="false"
                :on-change="handleFileChange"
                :on-remove="handleRemove"
            >
                <el-icon class="el-icon--upload"><Plus /></el-icon>
                <div class="el-upload__text">点击或拖拽文件到此处上传</div>
                <div class="el-upload__text">支持jpg、png</div>
                <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500kb
                </div>
                </template>
            </el-upload>
        </div>
        <div class="prompt_input">
            <el-input class="textarea" v-model="prompt"  type="textarea"  placeholder="请输入提示词" @input="on_input_change"> </el-input>
        </div>
        <div class="submit">
            <el-button type="primary" plain :icon="Edit" @click="on_click">点击OCR识别</el-button>
        </div>
    </div>
    <div class="imgshow">
            <div>
                <span>图片预览</span>
            </div>
            <div class="imgPreview" ref="imageRef" style=" margin-top:10px">
                <img v-if="previewImage" :src="previewImage" alt="Preview Imag" @load="onImageLoad">
            </div>
    </div>
    <div class="textshow">
        <div>
            <span>文字识别结果</span>
        </div>
        <div style="margin-top:10px">
            <el-input class="textarea"  v-model="text_result"  type="textarea"  placeholder="" > </el-input>
        </div>
    </div>
    
    </div>
</template>

<script setup>
    import { ref, onMounted, onUnmounted, inject } from 'vue';
    import { Edit } from '@element-plus/icons-vue';

    const text_result = ref("");
    const previewImage = ref('');
    const prompt = ref('');
    const image_base64_str = ref("")
    const imageRef = ref(null);
    const imgWidth = ref("");
    const imgHeight = ref("");
    const maxImageWidth = ref('');
    const maxImageHeight = ref('');
    const ws = ref(null);
    const isConnected = ref(false);

    const APP_config = inject('APP_config');
    console.log(APP_config)
    const ws_url = APP_config.wsBaseURL    
    console.log("ws_url", ws_url)


    const connectWebSocket =() =>{
      ws.value = new WebSocket(ws_url);
      ws.value.onopen = onOpenHandler;
      ws.value.onmessage = (event) => {        
            text_result.value += event.data
            // 如果这是最后一条预期的消息，关闭连接
            if ( event.data.isLastMessage) {
                ws.value.close()
            }
        };

        ws.value.onclose = (event) => {
            isConnected.value = false
            console.log('WebSocket connection closed', event);
            
        };

        ws.value.onerror = (error) => {
            console.error('WebSocket error', error);
        };
    }

    onUnmounted(()=>{
        if (ws.value && ws.value.readyState === WebSocket.OPEN){
            ws.value.close()
        }
    })

    const onOpenHandler = () => {
        isConnected.value = true;
        sendTextAndImage()
    }

    const on_input_change = () =>{
        text_result.value = ""
    }

    // 发送数据
    async function sendTextAndImage() {
        console.log("sendTextAndImage")
        const payload = {
            "text":prompt.value,
            "image_base64_str": image_base64_str.value,
        };

        if (isConnected.value && prompt.value && image_base64_str.value){
            console.log("payload: ", payload)
            ws.value.send(JSON.stringify(payload));
        }
    }

    const handleFileChange = (file, uploadFiles) =>{
        if (uploadFiles.length >= 2){
            uploadFiles.splice(0,uploadFiles.length-1)
        }
        if(file.raw && file.raw.type.startsWith("image/")){
            const reader = new FileReader()
            reader.onload = (e) => {
                previewImage.value = e.target.result
                image_base64_str.value = e.target.result.split(",")[1]
                let img = new Image()
                img.src = e.target.result
                img.onload=()=>{
                    imgWidth.value = img.width
                    imgHeight.value = img.height 
                    if (imgWidth.value > imgHeight.value) {
                        // 如果图片宽度大于高度，则限制宽度
                        maxImageWidth.value = "100%";
                        maxImageHeight.value = "auto";
                    } else {
                        // 否则，限制高度
                        maxImageWidth.value = 'auto';
                        maxImageHeight.value = `100%`;
                    }
                }
            }
                reader.readAsDataURL(file.raw)
        }else{
            ElMessage.error('Please upload an image file.')
        }
    };
    const handleRemove = (file, uploadFiles) =>{    
        if (uploadFiles.length ==0){
            previewImage.value = ""
            prompt.value = ""
            text_result.value = ""
        }
    };

    const onImageLoad = () => {
      // 在图片加载完成后，强制浏览器重新计算尺寸
      // 这可以通过触发一个重排或重绘来实现
        requestAnimationFrame(() => {
            // 强制浏览器重排
            const imgElement = document.querySelector('img')
            imgElement.style.width = maxImageWidth.value;
            imgElement.style.height = maxImageHeight.value
        });
    };

    const on_click = ()=>{
        if ( ! prompt.value && !image_base64_str.value){
            alert("prompt 和 图片不能为空，请重新输入")
        }
        text_result.value = ""
        if (! isConnected.value){
            connectWebSocket()
        }
        // onOpenHandler()
        // prompt.value = ""
        // image_base64_str.value = ""
    }

    defineOptions({
        name: 'imgOcrInference',
    });
</script>

<style lang="scss">
.imgocrinfer{
    display: flex;
    .input{
        width: 14.7vw;
        height: 90vh;
        border:2px solid #ffffff;
        box-shadow: 1px 0 4px #8c9eb11a;
        border-radius: 8px;
        .imgup{
            width: 14.7vw;
            height: 30vh;
            border:2px solid #ffffff;
            box-shadow: 1px 0 4px #8c9eb11a;
            border-radius: 8px;
            .el-upload{
                width: 14.3vw;
            }
        }
        .prompt_input{
            height: 15vh;
            .el-textarea__inner{
                width: 14.3vw;
                resize: none;
                height: 100px;
            }
        }
        .submit{
            width: 14.3vw;
            .el-button {
                width: 14.3vw;
            }
        }
    }
    .imgshow{
        height: 600px;
        width: 29.5vw;
        border:2px solid #ffffff;
        box-shadow: 1px 0 4px #8c9eb11a;
        border-radius: 8px;
        margin-left: 1vw;
        .imgPreview{
            border:2px solid rgb(167, 200, 238);
            height: 58vh;
            border-radius: 8px;
        }
    }

    .textshow{
        width: 19.8vw;
        border:2px solid #ffffff;
        box-shadow: 1px 0 4px #8c9eb11a;
        border-radius: 8px;
        .el-textarea__inner{
            width: 19.8vw;
            height: 58vh;
        }

    }
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2386242.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！