100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

vite-plugin-cesium插件配置域名后地址出错

CesiumJs yekong

vue3 vite js 项目开发中，在使用cesium时，我们需要vite-plugin-cesium插件来辅助，在项目打包后，如果是相对地址的话没有什么问题，如果base设置了地址后，那么打包出来的页面路径会出现。

vite-plugin-cesium介绍

vue3 vite项目如何使用cesium

比如配置了七牛的话，打包出来的路径是下面的情况，缺少了一个斜杠，每次打包都需要手动修改，实在难受.

 <link rel="stylesheet" href="/images.wanjunshijie.com/demo/cesium/vue3/cesium/Widgets/widgets.css">
  <script src="/images.wanjunshijie.com/demo/cesium/vue3/cesium/Cesium.js"></script>

修改后

 <link rel="stylesheet" href="//images.wanjunshijie.com/demo/cesium/vue3/cesium/Widgets/widgets.css">
  <script src="//images.wanjunshijie.com/demo/cesium/vue3/cesium/Cesium.js"></script>

排查插件代码

不得已，只能去排查一下vite-plugin-cesium插件的源码，发现是normalizePath方法造成的，

normalizePath作用

normalizePath函数的作用是将文件路径转换为平台的规范形式，以用户可以理解的形式显示它们，这样可以比较相对路径和绝对路径。在R语言中，这个函数常用于确保路径是标准化的，避免因为路径格式问题导致的错误。

具体来说，normalizePath会处理路径字符串，将其转换为完全限定的路径名。例如，它会解析出..和.，并将斜杠转换为当前操作系统默认的路径分隔符。这个函数还可以检查路径是否真实存在，并根据参数设置返回错误或警告。

函数的基本用法如下：

normalizePath(path, winslash = "\\", mustWork = NA)
  • path：文件路径的字符向量。
  • winslash：在Windows系统上使用的路径分隔符，可以是正斜杠/或反斜杠\\。
  • mustWork：逻辑值，如果为TRUE，则在无法确定结果时给出错误；如果为NA，则给出警告。

例如，你可以使用normalizePath来获取R的安装路径或者库的路径，这在设置工作环境或者查找文件时非常有用。

transformIndexHtml() {
  const tags: HtmlTagDescriptor[] = [
    {
      tag: 'link',
      attrs: {
        rel: 'stylesheet',
        href: normalizePath(CESIUM_BASE_URL + 'Widgets/widgets.css')
      }
    }
  ];
  if (isBuild && !rebuildCesium) {
    tags.push({
      tag: 'script',
      attrs: {
        src: normalizePath(CESIUM_BASE_URL + 'Cesium.js')
      }
    });
  }
  return tags;
}

修改后的代码

这里我们去掉normalizePath方法

transformIndexHtml() {
  const tags: HtmlTagDescriptor[] = [
    {
      tag: 'link',
      attrs: {
        rel: 'stylesheet',
        href: CESIUM_BASE_URL + 'Widgets/widgets.css'
      }
    }
  ];
  if (isBuild && !rebuildCesium) {
    tags.push({
      tag: 'script',
      attrs: {
        src: CESIUM_BASE_URL + 'Cesium.js'
      }
    });
  }
  return tags;
}

修改后上传git

这里我们使用github上自己的版本就解决了，vite-plugin-cesium插件配置域名后地址出错的问题了。

"vite-plugin-cesium": "github:yelingkong/vite-plugin-cesium",
喜欢