• vite项目配置:后端希望能任意更改打包后的接口请求地址


    需求

    有这样一个需求:项目线上的接口地址是经常会变化的,后端希望接口地址放在一个配置文件如config.js中,这个文件不能被打包压缩,从而后端能任意修改接口地址,这样就不用让前端重新打包了
    个人实践,总结了两种方案:

    方案一

    index.html

    新增script标签,window对象上挂载请求路径,后端想修改接口地址在html中修改即可

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
      </head>
      <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
        // 新增
        <script>
          window.httpurl = "http://192.168.1.236:10007/"
        </script>
      </body>
    </html>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    axios

    设置请求路径为window.httpurl

    const instance = axios.create({
      ...
      baseURL: window.httpurl  
    })
    
    • 1
    • 2
    • 3
    • 4

    方案二

    index.html

    新增<script src="./config.js"></script>,放在上面,避免js执行顺序问题,vite只会打包type="module"的script标签

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        // 新增
        <script src="./config.js"></script>
        <title>Vite App</title>
      </head>
      <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
      </body>
    </html>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    config.js

    新建config.js,内容如下

    window.httpurl = "http://192.168.1.236:10007/"
    
    • 1

    这样打包完会发现打包后的文件夹缺失config.js,因为config.js没有参与进打包,可以手动复制config.js到打包后的文件夹下,当然,更推荐的是使用插件vite-plugin-files-copy,该插件的作用是复制静态文件

    vite-plugin-files-copy

    npm i -D vite-plugin-files-copy
    
    • 1

    vite.config.js

    import { defineConfig } from "vite"
    import vue from "@vitejs/plugin-vue"
    import CopyPlugin from "./plugin"
    
    export default defineConfig({
      base: "./",
      plugins: [
        vue(),
        CopyPlugin({
          patterns: [
            {
              from: "public/config.js", // 相对路径,从public目录下
              to: "dist/config.js" // 相对路径,复制到dist目录下
            }
          ]
        })
      ]
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    axios

    设置请求路径为window.httpurl

    const instance = axios.create({
      ...
      baseURL: window.httpurl  
    })
    
    • 1
    • 2
    • 3
    • 4

    特殊情况

    另外,后端希望能动态设置接口地址为当前电脑的ip和端口地址

    config.js

    window.httpurl  =  window.location.protocol + "//" + window.location.host + "/"
    
    • 1
  • 相关阅读:
    JS逆向分析某枝网的HMAC加密、wasm模块加密
    IDEA项目下不显示target目录或者target目录不完整没有新添加的资源,idea隐藏target目录
    英飞凌TLF35584规格书中文
    ELK专栏之IK分词器和Java api操作索引--05
    LTE时域、频域资源
    常识——虚拟机安装centos7与联网
    System Synthesis
    qt的信号阻塞与断开
    测试电脑GPU性能代码
    小米将推出中端手机,高通骁龙7系列再添一员,能否吸引消费者?
  • 原文地址:https://blog.csdn.net/qq_42611074/article/details/125485315