Merge pull request #1 from Canees/main

Update README.md

.github/workflows/ci.yml

@@ -12,11 +12,11 @@ jobs:
     name: 'Build-Test'
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '22'
       - name: Install Deps
         run: yarn install
       - name: Build
@@ -27,18 +27,18 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node_version: ['16']
+        node_version: ['22']
         include:
           - os: macos-latest
-            node_version: 16
+            node_version: 22
           - os: windows-latest
-            node_version: 16
+            node_version: 22
     name: 'Demo-Build-Test: node-${{ matrix.node_version }}, ${{ matrix.os }}'
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Set node version to ${{ matrix.node_version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node_version }}
       - name: Package Install deps

.github/workflows/publish-to-npm.yml

@@ -7,15 +7,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: '22.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Install dependencies and build
         run: npm install && npm run build
-      - name: Publish package on NPM 
+      - name: Publish package on NPM
         run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -4,3 +4,4 @@ dist
 demo/public
 yarn.lock
 pnpm-lock.yaml
+package-lock.json

.publish.md

@@ -0,0 +1,19 @@
+## 发包步骤
+
+https://www.npmjs.com/package/vite-plugin-cesium-next
+
+```sh
+# nrm use npm
+# npm adduser
+npm publish
+# nrm use taobao
+```
+
+然后去 npmmirror 镜像源站点击同步一下
+https://npmmirror.com/package/vite-plugin-cesium-next
+
+## 撤包步骤
+
+```
+npm unpublish vite-plugin-cesium-next@<version> --force
+```

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Nshen
+Copyright (c) 2025 coder-xiaomo, 2021 Nshen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README-old.md

@@ -0,0 +1,136 @@
+# ⚡ vite-plugin-cesium
+
+[![npm](https://img.shields.io/npm/v/vite-plugin-cesium.svg)](https://www.npmjs.com/package/vite-plugin-cesium)
+[![npm](https://img.shields.io/npm/dt/vite-plugin-cesium)](https://www.npmjs.com/package/vite-plugin-cesium)
+
+Easily set up a [`Cesium`] project in [`Vite`].
+
+[`cesium`]: https://github.com/CesiumGS/cesium
+[`vite`]: https://github.com/vitejs/vite
+
+**update：** if you just wanna a scaffolding by using this plugin, try a simply command `yarn create cesium`, click [create-cesium](https://www.npmjs.com/package/create-cesium) for more info.
+
+Chinese tutorial: [中文教程](https://zhuanlan.zhihu.com/p/354856692)
+
+## Install
+
+```bash
+npm i cesium vite-plugin-cesium vite -D
+# yarn add cesium vite-plugin-cesium vite -D
+```
+
+## Usage
+
+add this plugin to `vite.config.js`
+
+```js
+import { defineConfig } from 'vite';
+import cesium from 'vite-plugin-cesium';
+export default defineConfig({
+  plugins: [cesium()]
+});
+```
+
+add dev command to `package.json`
+
+```json
+"scripts": {
+  "dev": "vite",
+  "build": "vite build"
+}
+```
+
+run:
+
+`yarn dev`
+
+## Options
+
+**rebuildCesium**
+
+- **Type :** `boolean`
+- **Default :** `false`
+
+Default copy min cesium file to dist. if `true` will rebuild cesium from source.
+
+```js
+import { defineConfig } from 'vite';
+import cesium from 'vite-plugin-cesium';
+export default defineConfig({
+  plugins: [
+    cesium({
+      rebuildCesium: true
+    })
+  ]
+});
+```
+
+## Demo
+
+`src/index.js`
+
+```js
+import { Viewer } from 'cesium';
+import './css/main.css';
+
+const viewer = new Viewer('cesiumContainer');
+```
+
+> or if you like global Cesium object you can write as
+
+```js
+import * as Cesium from 'cesium';
+const viewer = new Cesium.Viewer('cesiumContainer');
+```
+
+`index.html`
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>cesium-vite</title>
+    <script type="module" src="/src/index.js"></script>
+  </head>
+
+  <body>
+    <div id="cesiumContainer"></div>
+  </body>
+</html>
+```
+
+`src/css/main.css`
+
+```css
+html,
+body,
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+```
+
+Add `dev` and `build` commands to `package.json`
+
+```
+"scripts": {
+    "dev": "vite",
+    "build": "vite build"
+},
+```
+
+Run `yarn dev`
+
+For full demo project please check [./demo](https://github.com/nshen/vite-plugin-cesium/tree/main/demo) folder.
+
+##
+
+## License
+
+MIT

README.md

@@ -1,136 +1,81 @@
-# ⚡ vite-plugin-cesium
+# ⚡ vite-plugin-cesium-next
 
-[![npm](https://img.shields.io/npm/v/vite-plugin-cesium.svg)](https://www.npmjs.com/package/vite-plugin-cesium)
+> 本仓库 fork 自 [nshen/vite-plugin-cesium](https://github.com/nshen/vite-plugin-cesium)
-[![npm](https://img.shields.io/npm/dt/vite-plugin-cesium)](https://www.npmjs.com/package/vite-plugin-cesium)
 
-Easily set up a [`Cesium`] project in [`Vite`].
+本仓库在原仓库代码基础上，主要针对性修复/优化了以下问题
 
-[`cesium`]: https://github.com/CesiumGS/cesium
+- 相对路径问题：本仓库已支持在 vite.config.ts 中配置以下类型的 base: `'./'`, `'/'`, `'/foo/bar'`, `''`, `(不设置)` (新创建的项目 base 默认为 `'./'`，而原仓库针对 `'./'` 没有做很好的处理)
-[`vite`]: https://github.com/vitejs/vite
+- 资源请求路径：当 base 形如 `'/foo/bar'` 时，cesium 静态文件由 `/cesium...` 改为请求 `/foo/bar/cesium...`
-
+  鉴于原仓库作者可能不再维护此项目(详见：[issue](https://github.com/nshen/vite-plugin-cesium/issues/62#issuecomment-2957419669))，故 fork 本仓库 ([coder-xiaomo/vite-plugin-cesium-next](https://github.com/coder-xiaomo/vite-plugin-cesium-next)) 继续维护，欢迎提交 Issue / Pr ！
-**update：** if you just wanna a scaffolding by using this plugin, try a simply command `yarn create cesium`, click [create-cesium](https://www.npmjs.com/package/create-cesium) for more info.
-
-Chinese tutorial: [中文教程](https://zhuanlan.zhihu.com/p/354856692)
 
 ## Install
 
 ```bash
-npm i cesium vite-plugin-cesium vite -D
+# 记得安装 cesium 依赖哦
-# yarn add cesium vite-plugin-cesium vite -D
+npm i vite-plugin-cesium-next -D
+# yarn add vite-plugin-cesium-next -D
 ```
 
 ## Usage
 
-add this plugin to `vite.config.js`
+add this plugin to `vite.config.ts`
 
 ```js
 import { defineConfig } from 'vite';
-import cesium from 'vite-plugin-cesium';
+import cesium from 'vite-plugin-cesium-next'; // 👈 添加这一行
-export default defineConfig({
+
-  plugins: [cesium()]
-});
-```
-
-add dev command to `package.json`
-
-```json
-"scripts": {
-  "dev": "vite",
-  "build": "vite build"
-}
-```
-
-run:
-
-`yarn dev`
-
-## Options
-
-**rebuildCesium**
-
-- **Type :** `boolean`
-- **Default :** `false`
-
-Default copy min cesium file to dist. if `true` will rebuild cesium from source.
-
-```js
-import { defineConfig } from 'vite';
-import cesium from 'vite-plugin-cesium';
 export default defineConfig({
+  // ...
   plugins: [
+    // ...
+
+    // 👇 添加这一行
+    // usage: https://github.com/coder-xiaomo/vite-plugin-cesium-next#usage
+    cesium(),
+
+    // 或者如果你需要自定义配置，可以这样写 👇
     cesium({
-      rebuildCesium: true
+      /* 这里可以添加自定义配置 */
-    })
+
-  ]
+      /**
+       * 以下情况需要配置 `viteBase: '/'`
+       * 如果你的 baseUrl 是 './', 同时使用了 vue-router 的 history 模式路由
+       * 当存在二级或以上路由时, 相对路径获取 Cesium 静态资源会找不到
+       * 此时请将这里 viteBase 请配置为 '/'
+       *
+       * 以下情况可不配置 viteBase:
+       * 如果 baseUrl 是 / 开头的, 可不配置 viteBase, 插件会自动获取 vite.config.ts 内 base 配置
+       * 如果 vue-router 使用的是 hash 模式路由 (形如: `#/foo/bar`), 不影响静态资源地址, 可不配置 viteBase
+       * 如果 vue-router 使用的是 history 模式路由, 使用 Cesium 的所有页面:
+       *   - 若只有一级路由 (形如: `/foo`), 不需要配置 viteBase
+       *   - 若存在多级路由 (形如: `/foo/bar`), ⚠需要配置 viteBase
+       *
+       * default: 自动获取
+       */
+      viteBase: '/', // type: string
+
+      /**
+       * rebuild cesium library
+       */
+      rebuildCesium: false, // type: boolean
+
+      /**
+       */
+      devMinifyCesium: false, // type: boolean
+
+      /**
+       */
+      cesiumBuildRootPath: 'node_modules/cesium/Build', // type: string
+
+      /**
+       */
+      cesiumBuildPath: 'node_modules/cesium/Build/Cesium/', // type: string
+
+      /**
+       */
+      cesiumBaseUrl: 'cesium/', // type: string
+
+    }),
+  ],
 });
 ```
-
-## Demo
-
-`src/index.js`
-
-```js
-import { Viewer } from 'cesium';
-import './css/main.css';
-
-const viewer = new Viewer('cesiumContainer');
-```
-
-> or if you like global Cesium object you can write as
-
-```js
-import * as Cesium from 'cesium';
-const viewer = new Cesium.Viewer('cesiumContainer');
-```
-
-`index.html`
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>cesium-vite</title>
-    <script type="module" src="/src/index.js"></script>
-  </head>
-
-  <body>
-    <div id="cesiumContainer"></div>
-  </body>
-</html>
-```
-
-`src/css/main.css`
-
-```css
-html,
-body,
-#cesiumContainer {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-```
-
-Add `dev` and `build` commands to `package.json`
-
-```
-"scripts": {
-    "dev": "vite",
-    "build": "vite build"
-},
-```
-
-Run `yarn dev`
-
-For full demo project please check [./demo](https://github.com/nshen/vite-plugin-cesium/tree/main/demo) folder.
-
-##
-
-## License
-
-MIT

demo/index.html

@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>cesium-vite</title>
-    <script type="module" src="/src/index.ts"></script>
-  </head>
 
-  <body>
+<head>
-    <div id="cesiumContainer"></div>
+  <meta charset="UTF-8" />
-  </body>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-</html>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>cesium-vite</title>
+  <script type="module" src="/src/index.ts"></script>
+</head>
+
+<body>
+  <div id="cesiumContainer"></div>
+</body>
+
+</html>

demo/package.json

@@ -9,8 +9,8 @@
     "serve": "vite build && vite preview"
   },
   "devDependencies": {
-    "cesium": "1.96.0",
+    "cesium": "1.129.0",
-    "vite": "3.0.4",
+    "vite": "file:../node_modules/vite",
-    "vite-plugin-cesium": "link:.."
+    "vite-plugin-cesium-next": "file:.."
   }
 }

demo/vite.config.ts

@@ -1,6 +1,12 @@
 import { defineConfig } from 'vite';
-import cesium from 'vite-plugin-cesium';
+import cesium from 'vite-plugin-cesium-next';
 
 export default defineConfig({
-  plugins: [cesium()]
+  // base: './',
+  // base: '/',
+  base: '/foo/bar',
+
+  plugins: [
+    cesium(),
+  ],
 });

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "vite-plugin-cesium",
+  "name": "vite-plugin-cesium-next",
-  "version": "1.2.23",
+  "version": "2.0.4",
   "description": "Cesium library plugin for Vite",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -25,29 +25,32 @@
     "vite-plugin",
     "cesium"
   ],
-  "author": "nshen <nshen121@gmail.com>",
+  "author": "coderxiaomo <codingzhang@126.com>",
+  "contributors": [
+    "nshen <nshen121@gmail.com>"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/nshen/vite-plugin-cesium"
+    "url": "git+https://github.com/coder-xiaomo/vite-plugin-cesium-next.git"
   },
   "bugs": {
-    "url": "https://github.com/nshen/vite-plugin-cesium/issues"
+    "url": "https://github.com/coder-xiaomo/vite-plugin-cesium-next/issues"
   },
   "dependencies": {
-    "fs-extra": "^9.1.0",
+    "fs-extra": "^11.3.0",
-    "rollup-plugin-external-globals": "^0.6.1",
+    "rollup-plugin-external-globals": "^0.13.0",
-    "serve-static": "^1.14.1"
+    "serve-static": "^1.16.2"
   },
   "devDependencies": {
-    "@tsconfig/node12": "^1.0.7",
+    "@tsconfig/node22": "^22.0.2",
-    "@types/fs-extra": "^9.0.8",
+    "@types/fs-extra": "^11.0.4",
-    "@types/node": "^14.14.31",
+    "@types/node": "^22.15.32",
-    "@types/serve-static": "^1.13.9",
+    "@types/serve-static": "^1.15.8",
-    "prettier": "^2.2.1",
+    "prettier": "^3.5.3",
-    "tsup": "^6.2.1",
+    "tsup": "^8.5.0",
-    "typescript": "^4.2.2",
+    "typescript": "^5.8.3",
-    "vite": "^3.0.4"
+    "vite": "^6.1.0"
   },
   "peerDependencies": {
     "cesium": "^1.95.0",

src/index.ts

@@ -6,50 +6,103 @@ import { HtmlTagDescriptor, normalizePath, Plugin, UserConfig } from 'vite';
 
 interface VitePluginCesiumOptions {
   /**
-   * rebuild cesium library, default: false
+   * 以下情况需要配置 `viteBase: '/'`
+   * 如果你的 baseUrl 是 './', 同时使用了 vue-router 的 history 模式路由
+   * 当存在二级或以上路由时, 相对路径获取 Cesium 静态资源会找不到
+   * 此时请将这里 viteBase 请配置为 '/'
+   *
+   * 以下情况可不配置 viteBase:
+   * 如果 baseUrl 是 / 开头的, 可不配置 viteBase, 插件会自动获取 vite.config.ts 内 base 配置
+   * 如果 vue-router 使用的是 hash 模式路由 (形如: `#/foo/bar`), 不影响静态资源地址, 可不配置 viteBase
+   * 如果 vue-router 使用的是 history 模式路由, 使用 Cesium 的所有页面:
+   *   - 若只有一级路由 (形如: `/foo`), 不需要配置 viteBase
+   *   - 若存在多级路由 (形如: `/foo/bar`), ⚠需要配置 viteBase
+   *
+   * default: 自动获取
+   */
+  viteBase?: string;
+
+  /**
+   * rebuild cesium library
+   *
+   * default: false
    */
   rebuildCesium?: boolean;
+
+  /**
+   * default: false
+   */
   devMinifyCesium?: boolean;
+
+  /**
+   * default: 'node_modules/cesium/Build'
+   */
   cesiumBuildRootPath?: string;
+
+  /**
+   * default: 'node_modules/cesium/Build/Cesium/'
+   */
   cesiumBuildPath?: string;
+
+  /**
+   * default: 'cesium/'
+   */
   cesiumBaseUrl?: string;
+
 }
 
 export default function vitePluginCesium(options: VitePluginCesiumOptions = {}): Plugin {
   const {
+    viteBase = undefined,
     rebuildCesium = false,
     devMinifyCesium = false,
     cesiumBuildRootPath = 'node_modules/cesium/Build',
     cesiumBuildPath = 'node_modules/cesium/Build/Cesium/',
-    cesiumBaseUrl = 'cesium/'
+    cesiumBaseUrl = 'cesium/',
   } = options;
 
-  let CESIUM_BASE_URL = cesiumBaseUrl;
+  const CESIUM_BASE_URL = cesiumBaseUrl.endsWith('/')
-  if (!CESIUM_BASE_URL.endsWith('/')) {
+    ? cesiumBaseUrl
-    CESIUM_BASE_URL += '/';
+    : (cesiumBaseUrl + '/');
+
+  const globalVars: {
+    outDir: string,
+    base: string,
+    isBuild: boolean,
+    cesiumRelativeUrl: string,
+  } = {
+    outDir: 'dist',
+    base: '/',
+    isBuild: false,
+    cesiumRelativeUrl: '',
   }
-  let outDir = 'dist';
-  let base: string = '/';
-  let isBuild: boolean = false;
 
   return {
-    name: 'vite-plugin-cesium',
+    name: 'vite-plugin-cesium-next',
 
     config(c, { command }) {
-      isBuild = command === 'build';
+      // 项目中 vite.config.ts 配置的 base 路径
-      if (c.base !== undefined) {
+      if (viteBase) {
-        base = c.base;
+        globalVars.base = viteBase;
-        if (base === '') base = './';
+      } else if (c.base) {
+        globalVars.base = c.base;
+      } else {
+        globalVars.base = '/';
       }
+      // 是否是打包命令
+      globalVars.isBuild = command === 'build';
+      // 输出路径
       if (c.build?.outDir) {
-        outDir = c.build.outDir;
+        globalVars.outDir = c.build.outDir;
       }
-      CESIUM_BASE_URL = path.posix.join(base, CESIUM_BASE_URL);
+      // 项目浏览器中运行时，Cesium 资源的相对路径
+      globalVars.cesiumRelativeUrl = path.posix.join(globalVars.base, CESIUM_BASE_URL);
+
       const userConfig: UserConfig = {};
-      if (!isBuild) {
+      if (!globalVars.isBuild) {
         // -----------dev-----------
         userConfig.define = {
-          CESIUM_BASE_URL: JSON.stringify(CESIUM_BASE_URL)
+          CESIUM_BASE_URL: JSON.stringify(globalVars.cesiumRelativeUrl)
         };
       } else {
         // -----------build------------
@@ -60,7 +113,7 @@ export default function vitePluginCesium(options: VitePluginCesiumOptions = {}):
             chunkSizeWarningLimit: 5000,
             rollupOptions: {
               output: {
-                intro: `window.CESIUM_BASE_URL = ${JSON.stringify(CESIUM_BASE_URL)};`
+                intro: `window.CESIUM_BASE_URL = ${JSON.stringify(globalVars.cesiumRelativeUrl)};`
               }
             }
           };
@@ -79,7 +132,7 @@ export default function vitePluginCesium(options: VitePluginCesiumOptions = {}):
 
     configureServer({ middlewares }) {
       const cesiumPath = path.join(cesiumBuildRootPath, devMinifyCesium ? 'Cesium' : 'CesiumUnminified');
-      middlewares.use(path.posix.join('/', CESIUM_BASE_URL), serveStatic(cesiumPath, {
+      middlewares.use(path.posix.join('/', globalVars.cesiumRelativeUrl), serveStatic(cesiumPath, {
         setHeaders: (res, path, stat) => {
           res.setHeader('Access-Control-Allow-Origin', '*')
         }
@@ -87,14 +140,14 @@ export default function vitePluginCesium(options: VitePluginCesiumOptions = {}):
     },
 
     async closeBundle() {
-      if (isBuild) {
+      if (globalVars.isBuild) {
         try {
-          await fs.copy(path.join(cesiumBuildPath, 'Assets'), path.join(outDir, CESIUM_BASE_URL, 'Assets'));
+          await fs.copy(path.join(cesiumBuildPath, 'Assets'), path.join(globalVars.outDir, CESIUM_BASE_URL, 'Assets'));
-          await fs.copy(path.join(cesiumBuildPath, 'ThirdParty'), path.join(outDir, CESIUM_BASE_URL, 'ThirdParty'));
+          await fs.copy(path.join(cesiumBuildPath, 'ThirdParty'), path.join(globalVars.outDir, CESIUM_BASE_URL, 'ThirdParty'));
-          await fs.copy(path.join(cesiumBuildPath, 'Workers'), path.join(outDir, CESIUM_BASE_URL, 'Workers'));
+          await fs.copy(path.join(cesiumBuildPath, 'Workers'), path.join(globalVars.outDir, CESIUM_BASE_URL, 'Workers'));
-          await fs.copy(path.join(cesiumBuildPath, 'Widgets'), path.join(outDir, CESIUM_BASE_URL, 'Widgets'));
+          await fs.copy(path.join(cesiumBuildPath, 'Widgets'), path.join(globalVars.outDir, CESIUM_BASE_URL, 'Widgets'));
           if (!rebuildCesium) {
-            await fs.copy(path.join(cesiumBuildPath, 'Cesium.js'), path.join(outDir, CESIUM_BASE_URL, 'Cesium.js'));
+            await fs.copy(path.join(cesiumBuildPath, 'Cesium.js'), path.join(globalVars.outDir, CESIUM_BASE_URL, 'Cesium.js'));
           }
         } catch (err) {
           console.error('copy failed', err);
@@ -108,15 +161,15 @@ export default function vitePluginCesium(options: VitePluginCesiumOptions = {}):
           tag: 'link',
           attrs: {
             rel: 'stylesheet',
-            href: normalizePath(path.join(CESIUM_BASE_URL, 'Widgets/widgets.css')),
+            href: normalizePath(path.join(globalVars.cesiumRelativeUrl, 'Widgets/widgets.css')),
           }
         }
       ];
-      if (isBuild && !rebuildCesium) {
+      if (globalVars.isBuild && !rebuildCesium) {
         tags.push({
           tag: 'script',
           attrs: {
-            src: normalizePath(path.join(CESIUM_BASE_URL, 'Cesium.js')),
+            src: normalizePath(path.join(globalVars.cesiumRelativeUrl, 'Cesium.js')),
           }
         });
       }

tea.yaml

@@ -1,6 +0,0 @@
-# https://tea.xyz/what-is-this-file
----
-version: 1.0.0
-codeOwners:
-  - '0x5763B690102Cd5167Ad247a598a13018B84fF77f'
-quorum: 1