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

vue + cesium开发(5) 搭建 vue + cesium开发环境(2)的更多相关文章

  1. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  2. vue第一篇(搭建vue开发环境)

    1.下载node并安装 下载地址: https://nodejs.org/zh-cn/ 下载后双击文件安装 2.检查是否安装成功 node -v v10.16.0 npm -v 6.9.0 如果能正常 ...

  3. 小程序开发之搭建WebSocket的WSS环境(Apache+WorkerMan框架+PHP)

    最近公司的一个IoT项目用到了小程序的WSS协议环境,现在把整个的搭建开发过程分享给大家. 这里我们用的是WorkerMan框架,服务器是CentOS,Web服务器是Apache,开发语言是PHP. ...

  4. Unity3D开发之搭建Mac OS开发环境

    运行图 首先上几张图 IOS模拟器 坚屏 横屏 打包任务 摸索了一上午,才搞定在模拟器中运行.至于在Iphone真机中运行,虽然有开发者证书,目前还没在Xcode中配置好. 我今天第一次接触并使用MA ...

  5. Mac搭建Vue开发环境

    1.安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ ...

  6. cesium开发(1)搭建 vue + cesium开发环境

    进入新公司一段时间了,新公司业务主要从事卫星方面等webgl的开发,主要使用了leafletjs和cesium,其中cesium难度较大,需求较多,再进行了一段时间的使用开发后依旧感到有些力不从心, ...

  7. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  8. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  9. 搭建vue开发环境的步骤

    相信很多人在刚开始学习vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前在学习angular的时候搭建过一次,过了一个月后在搭建第二次的时候,竟然有一些混乱,所以今天想 ...

随机推荐

  1. 实验4:开源控制器实践——OpenDaylight

    实验4:开源控制器实践--OpenDaylight 一.实验目的 能够独立完成OpenDaylight控制器的安装配置: 能够使用Postman工具调用OpenDaylight API接口下发流表. ...

  2. 踩坑系列《五》 Incorrect datetime value: 时间添加失败原因

    在进行单元测试中通过 new Date() 方式添加时间时,报了 Data truncation: Incorrect datetime value:这样的错误(我数据库表的时间类型是 datetim ...

  3. 看动画学算法之:平衡二叉搜索树AVL Tree

    目录 简介 AVL的特性 AVL的构建 AVL的搜索 AVL的插入 AVL的删除 简介 平衡二叉搜索树是一种特殊的二叉搜索树.为什么会有平衡二叉搜索树呢? 考虑一下二叉搜索树的特殊情况,如果一个二叉搜 ...

  4. 题解 [HAOI2017]方案数

    题目传送门 Solution 我们没有障碍的时候很好做,直接设 \(f_{i,j,k}\) 表示到 \((x,y,z)\) \(x\) 有 \(i\) 位为 \(1\),\(y\) 有 \(j\) 位 ...

  5. 微服务网关Ocelot加入IdentityServer4鉴权-.NetCore(.NET5)中使用

    Consul+Ocelot+Polly在.NetCore中使用(.NET5)-Consul服务注册,服务发现 Consul+Ocelot+Polly在.NetCore中使用(.NET5)-网关Ocel ...

  6. [no code][scrum meeting] Alpha 15

    项目 内容 会议时间 2020-04-23 会议主题 OCR紧急会议 会议时长 45min 参会人员 PM + OCR组(赵涛,黎正宇) 项目 内容 会议时间 2020-04-24 会议主题 全体测试 ...

  7. 单片机零基础学习之从“点灯”入门STM32

    本篇文章通过一个简单的例子来熟悉模块化编程以及利用库函数的方法进行开发使用STM32外设的基本流程. 首先,我们打开本讲的例程,在工程目录我们可以看到驱动分组下有 led.delay 两个.c源文件, ...

  8. VCS常用仿真选项开关及步骤总结

    转自:https://blog.csdn.net/bcs_01/article/details/79803304 转自:https://blog.csdn.net/wonder_coole/artic ...

  9. 转:基于 xilinx vivado 的PCIE ip核设置与例程代码详解

    连接:https://blog.csdn.net/u014586651/article/details/103826967#comments

  10. popStar机机对战数据生成器代码(C#)

    代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...