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