vue + cesium开发(5) 搭建 vue + cesium开发环境（2）

上vue+cesium开发（1）中，没有进行配置webpack，而是使用了插件进行代替，在使用过程中出现了一些未知BUG，影响体验，因此参考了官方文档对项目进行重新配置，使用了

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

Bing Webmaster Portal