1. 程式人生 > 其它 >vue + cesium開發(5) 搭建 vue + cesium開發環境(2)

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'

TRANSLATE with x English
Arabic Hebrew Polish
Bulgarian Hindi Portuguese
Catalan Hmong Daw Romanian
Chinese Simplified Hungarian Russian
Chinese Traditional Indonesian Slovak
Czech Italian Slovenian
Danish Japanese Spanish
Dutch Klingon Swedish
English Korean Thai
Estonian Latvian Turkish
Finnish Lithuanian Ukrainian
French Malay Urdu
German Maltese Vietnamese
Greek Norwegian Welsh
Haitian Creole Persian
TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back