vue2(vue-cli3x[vue.config.js])使用cesium新版(1.117.0)配置过程
// vue.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
configureWebpack: {
amd: {
toUrlUndefined: true
},
plugins: [
// 定义环境变量,Cesium会根据这些变量来加载资源
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('')
}),
// 修正 webpack 与 Cesium 的 AMD 模块兼容性问题
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh|en/)
],
module: {
unknownContextCritical: false,
unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
alias: {
// 别名配置,简化引用
'cesium': path.resolve(__dirname, 'node_modules/cesium/Source')
}
}
},
// 设置静态资源的拷贝规则
chainWebpack: config => {
config.plugin('copy').tap(options => {
if (!options[0]) {
options[0] = [];
}
// 拷贝 Cesium 的 Assets、Widgets 和 Workers 文件夹中的内容
options[0].push({
from: path.join(__dirname, 'node_modules/cesium/Source/Assets'),
to: 'cesium/Assets'
});
options[0].push({
from: path.join(__dirname, 'node_modules/cesium/Source/Widgets'),
to: 'cesium/Widgets'
});
options[0].push({
from: path.join(__dirname, 'node_modules/cesium/Workers'),
to: 'cesium/Workers'
});
return options;
});
}
};
这个配置文件主要做了以下几点:
- 通过
DefinePlugin
定义了CESIUM_BASE_URL
环境变量,这样Cesium就会使用正确的基础路径。 - 使用
ContextReplacementPlugin
插件来修正Webpack与Cesium的AMD模块兼容性问题。 - 通过
configureWebpack
中的module.rules
添加了处理CSS文件的规则。 - 使用
configureWebpack
中的resolve.alias
为Cesium源码目录设置别名,以简化引用路径。 - 通过
chainWebpack
方法设置了静态资源拷贝规则,确保Cesium的资源能被正确拷贝到目标文件夹。
评论已关闭