上vue+cesium開發(1)中,沒有進行配置webpack,而是使用了插件進行代替,在使用過程中出現了一些未知BUG,影響體驗,因此參考了官方文檔對項目進行重新配置,使用了
copy-webpack-plugin 插件 進行配置,項目情況:vue版本2.6.11,copy-webpack-plugin:6.3.2,cesium:1.87.1
截止目前,copy-webpack-plugin版本為10.0.0,為什么需要安裝6.3.2版本呢,這是以為copy-webpack-plugin在7.0.0版本之上就需要webpack5以上才能正常運行,如果你是webpack4安裝了7.0.0以上則會報
compilation.getCache is not a function 這么一個錯誤
下面是詳細配置,由於是vue項目,我們都把配置寫在vue.config.js文件里面,如果沒有就在項目根目錄新建一個
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const cesiumSource = './node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
// 后續 import 引入 cesium 為改路徑下的
const cesiumBuild = './node_modules/cesium/Build/Cesium'
copy-webpack-plugin 6.X版本配置:
module.exports = {
// 基本路徑
publicPath: './',
configureWebpack: {
resolve: {
alias: {
cesium: path.resolve(__dirname, cesiumBuild),
},
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
{
from: path.join(cesiumSource, '../Build/Cesium/ThirdParty'),
to: 'ThirdParty',
},
],
}),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./'),
}),
],
module: {
unknownContextCritical: false,
},
},
}
copy-webpack-plugin 5.X版本配置:
module.exports = { // 基本路徑 publicPath: './', configureWebpack: { resolve: { alias: { cesium: path.resolve(__dirname, cesiumBuild), }, }, plugins: [ new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }, ]), new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' }, ]), new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }, ]), new CopyWebpackPlugin([ { from: path.join(cesiumSource, '../Build/Cesium/ThirdParty'), to: 'ThirdParty', }, ]), new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify('./'), }), ], module: { unknownContextCritical: false, }, }, }
同時,在需要使用cesium的地方引入即可
import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

