上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'