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