在vite中使用mars3d

由于vite相比较于webpack在开发环境中巨大的效率提升，于是打算将项目迁移至vite技术栈，之前在vue-cli的项目中使用mars3d需要通过 copy-webpack-plugin 来处理cesium的一些静态资源依赖。像下面这样。

[
  // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
  new webpack.DefinePlugin({
    CESIUM_BASE_URL: JSON.stringify(cesiumRunPath)
  }),
  // cesium相关资源目录需要拷贝到系统目录下面
  new CopyWebpackPlugin({
    patterns: [
      { from: path.join(cesiumSourcePath, "Workers"), to: path.join(config.output.path, cesiumRunPath, "Workers") },
      { from: path.join(cesiumSourcePath, "Assets"), to: path.join(config.output.path, cesiumRunPath, "Assets") },
      { from: path.join(cesiumSourcePath, "ThirdParty"), to: path.join(config.output.path, cesiumRunPath, "ThirdParty") },
      { from: path.join(cesiumSourcePath, "Widgets"), to: path.join(config.output.path, cesiumRunPath, "Widgets") }
    ]
  })
]

可以看出，比较麻烦并且以项目本身配置耦合度较高。使用vite之后，mars3d官方提供了插件来处理这个问题。

具体使用方式为。

// 安装
npm install vite-plugin-mars3d -D

// 导入
import mars3dPlugin from 'vite-plugin-mars3d';

// 在vite的plugins选项中添加
mars3dPlugin()

即可解决此问题，简单又方便