vue3 打包后动态配置 ​

为什么会有这么个需求呢 ​

最近在开发CMS，所以想直接分发 cms 的打包后的代码。但是这里面就有个问题，如果我将打包后的代码直接让用户使用，那么不得不面临一个问题，就是打包后的接口地址也会直接打包给了用户。所以这里就需要用户自己去设置接口地址。但是前端是打包后的代码，没有办法去修改，所以就需要这么一个动态修改配置的功能

挂载 ​

如何进行挂载呢？首先需要在入口文件index.html引入

javascript
<div id="app"></div>
<script type="module" src="../resources/admin/app.ts"></script>

// 就在这里引入
<script src="./static/config.js"></script>

千万不要纠结这个路径，因为这是打包后的路径，所以开发的时候也不需要管它。

第二步，如果没有public目录，在项目的任意目录创建 public 目录，在public目录下创建 static/config.js, 内容如下

javascript
window.admin_config = {
  title: '',
  BASE_URL: ''
}

然后找到 axios 请求，CatchAdmin进行了封装，所以使用的是 support\http.ts。 在这之前 CatchAdmin 还封装了两个助手方法

javascript
// 从 window 对象获取配置
// 因为动态配置挂载在 window 的 admin.config 属性
export function _window(key: string) {
  if (window.hasOwnProperty('admin_config')) {
    //@ts-ignore
    return window.admin_config[key]
  }

  return null
}

// 获取 base_url
export function getBaseUrl() {
  // 如果动态配置存在并且 BASE_URL 有值，则从动态配置获取
  // 否则从 env 配置获取
  return _window('BASE_URL') ? _window('BASE_URL') : env('VITE_BASE_URL')
}

再到 http.ts 获取 baseURL

javascript
  protected getConfig(): AxiosRequestConfig {
    // set base url
    this.config.baseURL = getBaseUrl()
  }

这样就可以了。那会有人有疑问？./static/config.js 怎么引入的呢？ 在 build 打包后，public 会被打包到 index.html 平级目录，所以可以直接引入。对了，忘了一个很重要的，就是配置 public 目录，找到 vite.config.js 文件

javascript
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
        publicDir: 'public 目录相对路径',
  }
}
JaguarJack
后端开发工程师，前端入门选手，略知相关服务器知识，偏爱❤️ Laravel & Vue
本作品采用《CC 协议》，转载必须注明作者和本文链接