vue + cesium開發(5) 搭建 vue + cesium開發環境(2)
阿新 • • 發佈:2021-11-18
上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 這麼一個錯誤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'
TRANSLATE with x
English
TRANSLATE with
EMBED THE SNIPPET BELOW IN YOUR SITE
Enable collaborative features and customize widget: Bing Webmaster Portal
Back