cesium 配置vue.config.js

### 如何在 Vue 项目中配置 Cesium 的 `vue.config.js` 设置 为了成功集成 CesiumJS 到 Vue.js 项目中，需要特别注意 Webpack 的配置。由于 Cesium 使用了大量的静态资源（如图片、shaders 和字体），这些文件可能无法通过默认的 Webpack 配置加载。因此，在 `vue.config.js` 中进行适当调整是非常重要的。 以下是针对 Cesium 在 Vue 项目的具体配置方法及其说明： #### vue.config.js 示例代码 ```javascript const path = require('path'); const webpack = require('webpack'); module.exports = { configureWebpack: { plugins: [ new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify('') }) ], module: { rules: [ { test: /\.(png|jpg|gif|svg|woff|woff2)$/, loader: 'url-loader', options: { limit: 10000, // 小于 10KB 的文件会被 base64 编码嵌入到 JS 文件中 name: '[name].[ext]' } }, { test: /\.glsl$/, use: ['raw-loader'] } ] }, resolve: { alias: { cesium$: 'cesium/Source', // 解决路径别名问题 '@': path.resolve(__dirname, './src') // 方便 src 路径引用 } } }, chainWebpack(config) { config.plugin('copy').use(require('copy-webpack-plugin'), [{ patterns: [ { from: 'node_modules/cesium/Build/CesiumUnminified/Assets', to: 'cesium/Assets' }, { from: 'node_modules/cesium/Build/CesiumUnminified/Widgets', to: 'cesium/Widgets' }, { from: 'node_modules/cesium/Build/CesiumUnminified/ThirdParty', to: 'cesium/ThirdParty' } ] }]); }, css: { loaderOptions: { sass: { additionalData: ` @import "@/styles/_variables.scss"; ` } } }, devServer: { before(app) { app.get('/cesium/favicon.ico', (req, res) => { res.send(''); }); } } }; ``` --- #### 关键部分解释 1. **DefinePlugin 插件** 定义全局变量 `CESIUM_BASE_URL` 来指定 Cesium 资源的基础路径[^1]。这有助于解决某些情况下 Cesium 寻找资源失败的问题。 2. **UrlLoader 处理静态资源** 对 PNG、JPG、GIF、SVG、WOFF 等类型的文件使用 `url-loader` 加载器处理。如果文件大小小于设定阈值（此处为 10KB），它们会以 Base64 形式嵌入到 JavaScript 文件中；否则将以独立文件形式存在。 3. **RawLoader 支持 GLSL 文件** 添加对 `.glsl` 文件的支持，因为 Cesium 可能依赖一些着色器脚本文件。这里我们使用 `raw-loader` 将其作为字符串读取并传递给 Cesium。 4. **Alias 路径映射** 创建了一个别名为 `cesium$` 指向 `cesium/Source`，简化了模块导入路径。 5. **CopyWebpackPlugin** 使用此插件复制必要的 Cesium 子目录（如 Assets、Widgets 和 ThirdParty）到构建输出目录下，确保运行时能够找到所需的静态资源。 6. **DevServer 自定义路由** 当访问 `/cesium/favicon.ico` 请求时返回空白响应，防止浏览器尝试请求不存在的图标而导致错误提示。 7. **CSS Loader Options** 如果项目中有 SCSS 或其他样式预处理器，则可以通过额外数据注入公共样式表（例如 `_variables.scss`），保持一致性设计风格。 --- ### 注意事项 - 上述配置适用于大多数场景下的 Cesium + Vue 开发需求，但在实际操作过程中仍需根据具体情况微调参数。 - 若采用的是 Vue CLI 版本较新的版本，请确认所使用的 API 是否有所变化，并及时更新文档查阅最新支持功能。 ---