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