谁知这时候领导却告诉我网站一直白屏。当时我直接就蒙了，打开控制台发现并没有错误，打开网络选项卡看到资源都正常的请求了下来，看着本地运行毫无破绽的代码陷入了沉思。

检查提交的代码，发现没有明显的导致错误的原因。怀疑是路由方面导致的错误，然后将路由模式从 history 切换到 hash 并且配置publicPath为 "/"

部署之后还是白屏，接下来就是不断地修改代码，不断麻烦运维部署，却始终不能解决问题。

这时候我就想尝试将项目部署到自己的服务器上试一试，结果能正常访问（这河狸吗？）。 阅读路由的代码发现默认地址展示的是 Home 组件，我就想试试能不能用一下重定向，结果居然能正常使用了。。。

这是之前的

改为重定向

5月7日更新

上述修改方式仅供参考，没有太大实际意义

五一回来后发现网站又白屏访问不了了，这一次仔仔细细地检查每一行提交的代码，发现了一处错误：

编写的css字符串后面多了一个 “}” ，开发环境和我自己的服务器环境下都不会导致白屏，但是在公司的服务器上导致了一直白屏（用的 IIS 部署的）。

新的问题

现在访问不会导致一直白屏了，又出现了新的问题，部署好了以后第一次访问是正常的，如果清除缓存后刷新就会导致某一些 js、css 文件获取为空，并且控制台报错：

检查后发现是高地地图 API 中传递的经纬度为空导致的。 修改相关代码（仅供参考）：

let map = null;

function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: '',
  }
  AMapLoader.load({
    key: "", //开发者Key
    version: "2.0", // 指定要加载的 JSAPI 的版本，
  }).then((AMap) => {
    map = new AMap.Map("container", {  //设置地图容器id
      viewMode: "3D",    //是否为3D地图模式
      zoom: 9,           //初始化地图级别
      center: [11,11], //初始化地图中心点位置
    })
    // 添加插件
    AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
      //异步同时加载多个插件
      // 添加地图插件
      map.addControl(new AMap.ToolBar()) // 工具条控件;范围选择控件
      map.addControl(new AMap.Scale()) // 显示当前地图中心的比例尺
      map.addControl(new AMap.HawkEye()) // 显示缩略图
      map.addControl(new AMap.Geolocation()) // 定位当前位置
      map.addControl(new AMap.MapType()) // 实现默认图层与卫星图,实时交通图层之间切换
?
      // 以下是鼠标工具插件
      const mouseTool = new AMap.MouseTool(map)
    })
    addMarkerIfValid(11, 11, '地点名称xxxx');
  }).catch(e => {
    console.log(e)
  })
}
?
// 函数用于检查经纬度并添加标记
function addMarkerIfValid(lng, lat, title) {
  if (lng && lat) {
    const marker = new AMap.Marker({
      position: new AMap.LngLat(lng, lat),
      title: title,
    });
    map.add(marker);
  } else {
    console.log('无效的经纬度');
  }
}
?
onMounted(() => {
  initMap()
})
?
onUnmounted(() => {
  map?.destroy();
  map = null;
});

最终解决了所有问题。

作者：淡云123
链接：https://juejin.cn/post/7363453558031859748