vue + cesium開發(5) 搭建 vue + cesium開發環境(2)


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM