当前位置：首页 > news >正文

vue引用cesium，解决“Not allowed to load local resource”报错

news 来源：原创 2025/6/8 14:30:38

vue引用cesium，解决“Not allowed to load local resource”报错@TOC

工具 vscode

node ：v22.14.0
npm ：10.9.2
vue：@vue/cli 5.0.8

一、创建一个 Vue 3 项目

1.创建名为cesium_test的项目：

vue create cesium_test

2.选择默认的 Vue 3

二、安装 Cesium 包

npm install cesium --save

三、修改配置文件

打开 vue.config.js 文件，修改为如下内容（前期因为此文件未配置正确，造成“Not allowed to load local resource”错误）：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
// CesiumJS源代码的路径
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,configureWebpack: {output: {sourcePrefix: ''},resolve: {fallback: { "https": false, "zlib": false, "http": false, "url": false },},plugins: [// 复制Cesium的Assets、Widgets和Workers到一个静态目录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, 'ThirdParty'), to: 'ThirdParty' }]}),new webpack.DefinePlugin({//在Cesium中定义一个相对基本路径来加载资源CESIUM_BASE_URL: JSON.stringify('')})],}
})

四、修改public/index.html文件

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title><%= htmlWebpackPlugin.options.title %></title><link rel="stylesheet" href="./Cesium/Widgets/widgets.css"><script type="text/javascript" src="./Cesium/Cesium.js"></script><!--<link rel="stylesheet" href="node_modules/cesium/Build/Cesium/Widgets/widgets.css"><script type="text/javascript" src="node_modules/cesium/Build/Cesium/Cesium.js"></script>--></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

五、修改HelloWorld.vue文件

<template><div id="cesiumContainer" style="height: 100%;"></div>
</template><script>
import * as Cesium from "cesium"export default {name: "HomeView",mounted() { this.viewer = new Cesium.Viewer("cesiumContainer", {homeButton: false,sceneModePicker: false,baseLayerPicker: false, // 影像切换animation: true, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: false, // 是否显示地名查找控件timeline: true, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件});  },};
</script><style scoped>#cesiumContainer {width: 100%;height: 100%;background-color: black;}
</style>

运行效果

在这里插入图片描述

vue引用cesium，解决“Not allowed to load local resource”报错

vue引用cesium，解决“Not allowed to load local resource”报错TOC 工具 vscode node ：v22.14.0npm ：10.9.2vue：vue/cli 5.0.8 一、创建一个 Vue 3 项目 1.创建名为cesium_test的项目： vue create cesium_test2.…...

编程日记 2025/5/27 6:15:13

阿里云服务器跑模型教程

首先打开阿里云官网点击免费试用选择250工时/月的免费仨月新人试用套餐点击右上角主账号选择人工智能平台PAI 然后选择交互式建模(DSW) 选择新建实例起个名字然后点击确定点击打开进入到命令行工具下载MINIConda和对应的pytorch还有相关依赖库文件即可然后上传…...

编程日记 2025/5/29 11:45:49

JavaScript入门【2】语法基础

1.JavaScript的引⼊⽅式(使用): 1.方式1:行内引用: 此种方式是将<font style"color:rgb(38,38,38);">JavaScript代码作为HTML标签的属性值使⽤,示例如下:</font><html lang"en"> <head><meta charset"UTF-8"><…...

编程日记 2025/5/31 9:21:49

调用DeepSeek系列模型问答时，输出只有＜/think＞标签，而没有＜think＞标签

问题：调用DeepSeek系列模型问答时，输出结果缺少只有标签，而没有标签？ DeepSeek官方有关说明这里设置成这样是为了保证让模型的生成是以"<think>\n"开头的，然后开始思考过程，避免模型没…...

编程日记 2025/5/25 21:47:38

python：gimp 与 blender 两个软件如何协作？

GIMP（GNU Image Manipulation Program）和 Blender 是两个不同领域的开源工具，但它们在数字创作流程中常协同使用，以下是它们的主要联系和互补性： 1. 功能互补：2D 与 3D 的结合 GIMP 是专业的 2D 图像处理工…...

编程日记 2025/5/21 11:45:02

MMDetection环境安装配置

MMDetection 支持在 Linux，Windows 和 macOS 上运行。它需要 Python 3.7 以上，CUDA 9.2 以上和 PyTorch 1.8 及其以上。 MMDetection 至今也一直更新很多个版本了，但是对于最新的pytorch版本仍然不支持，我安装的时候仍然多次遇到m…...

编程日记 2025/5/29 12:34:02

【springboot+vue3的前后端分离项目实现支付宝的沙箱支付】

【springbootvue3的前后端分离项目实现支付宝的沙箱支付】以下是基于SpringBoot Vue前后端分离项目实现支付宝沙箱支付的完整解决方案，包含关键代码和调试技巧一、项目架构设计二、后端实现（SpringBoot） 1. 添加依赖 <!-- pom.xml…...

编程日记 2025/5/31 6:36:02

基于Llama3的开发应用（二）：大语言模型的工业部署

大语言模型的工业部署 0 前言1 ollama部署大模型1.1 ollama简介1.2 ollama的安装1.3 启动ollama服务1.4 下载模型1.5 通过API调用模型 2 vllm部署大模型2.1 vllm简介2.2 vllm的安装2.3 启动vllm模型服务2.4 API调用 3 LMDeploy部署大模型3.1 LMDeploy简介3.2 LMDeploy的安装3.3…...

编程日记 2025/6/2 15:22:15

MySQL只操作同一条记录也会死锁吗?

大家好，我是锋哥。今天分享关于【MySQL只操作同一条记录也会死锁吗?】面试题。希望对大家有帮助； MySQL里where条件的顺序影响索引使用吗？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在MySQL中，死锁通常发生在多…...

编程日记 2025/5/29 11:12:16

Linux的静态库共享库进程主函数的参数

1、库文件库文件库是一组预先编译好的方法的集合； Linux系统储存的位置一般在/lib和/usr/lib中库的头文件放在/usr/include 库分类：静态库（libxxx.a）共享库（libxxx.so） 静态库 （1&#…...

编程日记 2025/5/21 14:30:56

软件设计师考试结构型设计模式考点全解析

结构型设计模式考点全解析一、分值占比与考察趋势分析（75分制） 设计模式近5年平均分值考察频率趋势分析适配器模式3-5分高频保持稳定桥接模式2-3分中频略有上升组合模式4-6分高频持续重点装饰器模式3-4分高频稳定考察代理模式5-7分高频逐年增加外观模…...

编程日记 2025/5/28 16:39:22

Java-Objects类高效应用的全面指南

Java_Objects类高效应用的全面指南前言一、Objects 类概述二、Objects 类的核心方法解析2.1 requireNonNull系列方法：空指针检查的利器2.2 equals方法：安全的对象比较2.3 hashCode方法：统一的哈希值生成2.4 toString方法：灵活的对…...

编程日记 2025/5/27 7:46:19

PostGIS实现栅格数据入库-raster2pgsql

raster2pgsql使用与最佳实践一、工具概述 raster2pgsql是PostGIS提供的命令行工具，用于将GDAL支持的栅格格式（如GeoTIFF、JPEG、PNG等）导入PostgreSQL数据库，支持批量加载、分块切片、创建空间索引及金字塔概览，是栅格数据入库的核心工具。二、核心功能与典型用法 1…...

编程日记 2025/5/31 8:49:02

专题四：综合练习（组合问题的决策树与回溯算法）

以leetode77题为例题目分析： 给一个数字n，你可以在1到n中选k个数字进行组合，注意包括1和n，而且通过观察实例 1，2和2，1是一样的，所以我们画决策树的时候，只需要从当前位置往后列举…...

编程日记 2025/5/29 11:19:31

从神经架构到万物自动化的 AI 革命：解码深度学习驱动的智能自动化新范式

目录一、深度学习与 AI 自动化概述二、深度学习核心技术解析 2.1 常见深度学习架构 2.2 关键算法三、AI 自动化实践案例 3.1 图像分类自动化 3.2 自然语言处理自动化 —— 文本情感分析编辑五、自动化系统设计与实现 5.1 端到端自动化框架 5.2 自动化测试框架…...

编程日记 2025/5/30 19:42:48

3.5/Q1，GBD数据库最新文章解读

文章题目：Burden, trends, projections, and spatial patterns of lip and oral cavity cancer in Iran: a time-series analysis from 1990 to 2040 DOI：10.1186/s12889-025-22202-8 中文标题：伊朗唇癌和口腔癌的负担、趋势、预测和空间模式…...

编程日记 2025/5/29 17:55:49

智慧校园（含实验室）智能化专项汇报方案

该方案聚焦智慧校园（含实验室）智能化建设，针对传统实验室在运营监管、环境监测、安全管控、排课考勤等方面的问题，依据《智慧校园总体框架》等标准，设计数字孪生平台、实验室综合管理平台、消安电一体化平台三大核心平台，涵盖通信、安防、建筑设备管理等设施，涉及 395 个…...

编程日记 2025/5/27 6:52:30

玩转 AI · 思考过程可视化

玩转 AI 思考过程可视化我们在开发 AI 的思维链 / 处理流时，难免遇到耗时较长的流程，如果遇到处理过慢的，用户什么也看不到可能丧失使用兴趣，对于这种情况，一个巧妙的产品思维就是呈现处理进度。示例其实完成这个页…...

编程日记 2025/5/29 12:20:02

hysAnalyser 从MPEG-TS导出ES功能说明

摘要 hysAnalyser 是一款特色的 MPEG-TS 数据分析工具。本文主要介绍了 hysAnalyser 从MPEG-TS 中导出选定的 ES 或 PES 功能(版本v1.0.003)，以便用户知悉和掌握这些功能，帮助分析和解决各种遇到ES或PES相关的实际问题。hysAnalyser 支持主流的MP1/MP2/…...

编程日记 2025/5/29 12:16:02

[YOLO模型]（4）YOLO V3的介绍

文章目录 YOLO V3一、模型思想二、模型性能三、改进的地方1. 三种scale2. scale变换经典方法3. 残差连接4. 核心网络架构(1) 结构(2) 输出与先验框关系 5. Logistic分类器替代Softmax 四、总结 YOLO V3 一、模型思想作者 Redmon 又在 YOLOv2 的基础上做了一些改进&#xff1a…...

编程日记 2025/5/26 7:38:12

期望是什么：（无数次的均值，结合概率）21/6=3.5

https://seeing-theory.brown.edu/basic-probability/cn.html 期望是什么：（无数次的均值，结合概率）21/6=3.5 一、期望（数学概念）在概率论和统计学中，**期望（Expectation）**是一个核心概念，用于描述随机变量的长期平均取值，反映随机变量取值的集中趋势。（一…...

编程日记 2025/5/22 8:12:06

Stacking（堆叠）：集成学习中的“超级英雄团队”

在机器学习的世界里，如果要找一个类似漫威“复仇者联盟”的存在，那么**Stacking（堆叠）**无疑是最佳候选人。就像钢铁侠、美国队长和雷神各自拥有独特的能力，但只有当他们组队时才能发挥出惊人的战斗力，Stac…...

编程日记 2025/6/3 15:35:21

手写tomcat：基本功能实现（3）

TomcatRoute类 TomcatRoute类是Servlet容器，是Tomcat中最核心的部分，其本身是一个HashMap，其功能为：将路径和对象写入Servlet容器中。 package com.qcby.config;import com.qcby.Util.SearchClassUtil; import com.qcby.servlet…...

编程日记 2025/5/30 12:01:48

nt!MiRemovePageByColor函数分析之脱链和刷新颜色表

第0部分：背景 PFN_NUMBER FASTCALL MiRemoveZeroPage ( IN ULONG Color ) { ASSERT (Color < MmSecondaryColors); Page FreePagesByColor[Color].Flink; if (Page ! MM_EMPTY_LIST) { // // Remove the first entry on the zeroe…...

编程日记 2025/5/23 17:58:46

时间筛掉了不够坚定的东西

2025年5月17日，16~25℃，还好待办： 《高等数学1》重修考试《高等数学2》备课《物理[2]》备课《高等数学2》取消考试资格学生名单《物理[2]》取消考试资格名单职称申报材料 2024年税务申报 5月24日、25日监考报名遇见：敲了一…...

编程日记 2025/5/22 0:21:28

3D个人简历网站 4.小岛

1.模型素材在Sketchfab上下载狐狸岛模型，然后转换为素材资源asset，嫌麻烦直接在网盘链接下载素材， Fox’s islandshttps://sketchfab.com/3d-models/foxs-islands-163b68e09fcc47618450150be7785907https://gltf.pmnd.rs/ 素材夸克网盘&a…...

编程日记 2025/5/18 11:24:23

第十一课蜗牛爬树

上次作业同学们课后可以尝试找一下30以内，哪个整数有最多的因数呢？ 这个整数有多少个因数呢？ 最好使用程序来进行判断哦 int main() {int max_num 1; // 记录因数最多的数int max_count 1; // 记录最大因数个数for (int num 2; num <…...

编程日记 2025/6/2 0:24:23

字体样式集合

根据您提供的字体样式列表，以下是分类整理后的完整字体样式名称（不含数量统计）： 基础样式 • Regular • Normal • Plain • Medium • Bold • Black • Light • Thin • Heavy • Ultra • Extra • Semi • Hai…...

编程日记 2025/5/28 0:22:55

Spring MVC 如何处理文件上传？需要哪些配置和依赖？如何在 Controller 中接收上传的文件 (MultipartFile)？

Spring MVC 处理文件上传主要依赖于 MultipartResolver 接口及其实现。最常用的实现是 CommonsMultipartResolver（基于 Apache Commons FileUpload）和 StandardServletMultipartResolver（基于 Servlet 3.0 API）。以下是如何配置…...

编程日记 2025/5/22 17:18:21

探索C++对象模型：（拷贝构造、运算符重载）成员函数的深度解读（中篇）

前引：在C的面向对象编程中，对象模型是理解语言行为的核心。无论是类的成员函数如何访问数据，还是资源管理如何自动化，其底层机制均围绕两个关键概念展开：拷贝复制、取地址重载成员函数。它们如同对象的“隐形守护者”&…...

编程日记 2025/5/29 17:14:09

[逆向工程]C++实现DLL注入：原理、实现与防御全解析（二十五）

[逆向工程]C实现DLL注入：原理、实现与防御全解析（二十五） 引言 DLL注入（DLL Injection）是Windows系统下实现进程间通信、功能扩展、监控调试的核心技术之一。本文将从原理分析、代码实现、实战调试到防御方案&#x…...

编程日记 2025/5/31 19:07:14

gcc/g++常用参数

1.介绍 gcc用于编译c语言，g用于编译c 源代码生成可执行文件过程，预处理-编译-汇编-链接。https://zhuanlan.zhihu.com/p/476697014 2.常用参数说明 2.1编译过程控制参数作用-oOutput，指定输出名字-cCompile，编译源文件生成对…...

编程日记 2025/5/27 17:34:45

51单片机课设基于GM65模块的二维码加条形码识别

系统组成主控单元：51单片机（如STC89C52）作为核心控制器，协调各模块工作。扫描模块：GM65条码扫描头，支持二维码/条形码识别，通过串口（UART）与单片机通信。显示模块&a…...

编程日记 2025/5/27 6:11:55

物联网赋能7×24H无人值守共享自习室系统设计与实践！

随着"全民学习"浪潮的兴起，共享自习室市场也欣欣向荣，今天就带大家了解下在物联网的加持下，无人共享自习室系统的设计与实际方法。一、物联网系统整体架构 1.1 系统分层设计层级技术组成核心功能用户端微信小程序/H5预约选座、…...

编程日记 2025/5/28 14:35:08

基于多头自注意力机制(MHSA)增强的YOLOv11主干网络—面向高精度目标检测的结构创新与性能优化

深度学习在计算机视觉领域的快速发展推动了目标检测算法的持续进步。作为实时检测框架的典型代表，YOLO系列凭借其高效性与准确性备受关注。本文提出一种基于多头自注意力机制(Multi-Head Self-Attention, MHSA)增强的YOLOv11主干网络结构，旨在提升模型在…...

编程日记 2025/5/29 13:52:44

使用Spring Boot与Spring Security构建安全的RESTful API

使用Spring Boot与Spring Security构建安全的RESTful API 引言在现代Web应用开发中，安全性是不可忽视的重要环节。Spring Boot和Spring Security作为Java生态中的主流框架，为开发者提供了强大的工具来构建安全的RESTful API。本文将详细介绍如何结合S…...

编程日记 2025/5/26 16:16:34

小刚说C语言刷题—1230蝴蝶结

1.题目描述请输出 n 行的蝴蝶结的形状，n 一定是一个奇数！ 输入一个整数 n ，代表图形的行数！ 输出 n 行的图形。样例输入 9 输出 ***** **** *** ** * ** *** **** ***** 2.参考代码（C语言版&#xff09…...

编程日记 2025/6/4 3:44:57

利用SenseGlove触觉手套开发XR手术训练体验

VirtualiSurg和VR触觉作为领先的培训平台，VirtualiSurg自2017年以来一直利用扩展现实 (XR) 和触觉技术，为全球医疗保健行业提供个性化、数据驱动的学习解决方案。该平台赋能医疗专业人员进行协作式学习和培训，提升他们的技能，使…...

编程日记 2025/5/26 18:13:56

CT重建笔记（五）—2D平行束投影公式

写的又回去了，因为我发现我理解不够透彻，反正想到啥写啥，尽量保证内容质量好简洁易懂 2D平行束投影公式 p ( s , θ ) ∫ ∫ f ( x , y ) δ ( x c o s θ y s i n θ − s ) d x d y p(s,\theta)\int \int f(x,y)\delta(x cos\theta ysi…...

编程日记 2025/5/29 7:21:49

【Java】应对高并发的思路

在Java中应对高并发场景需要结合多方面的技术手段和设计模式，从线程管理、数据结构、同步机制到异步处理、IO优化等，都需要合理设计和配置。以下是Java在高并发场景下的主要应对策略和最佳实践： 1. 线程管理 1.1 线程池（ThreadPo…...

编程日记 2025/5/28 7:33:58

从数据分析到数据可视化：揭开数据背后的故事

从数据分析到数据可视化：揭开数据背后的故事大家好，今天咱们聊聊“从数据分析到数据可视化”的完整流程。说实话，数据分析和可视化这俩词听起来高大上，但咱们平时就是围绕这俩词打转——数据分析帮我们找故事，可视化则帮我们讲故事。没有它们，数据就是死的；有了它们，数…...

编程日记 2025/5/29 19:27:33

WPS JS宏实现去掉文档中的所有空行

WPS改造系列文章： 1.在WPS中通过JavaScript宏（JSA）调用本地DeepSeek API优化文档教程：在WPS中通过JavaScript宏（JSA）调用本地DeepSeek API优化文档教程_wps javascript-CSDN博客 2.在WPS中通过JavaScrip…...

编程日记 2025/6/2 12:58:52

【2025年软考中级】第一章1.6 安全性、可靠性、性能评价

文章目录安全性、可靠性、性能评价计算机可靠性可靠性指标串并联系统可靠性并联系统可靠性N模元余系统计算机系统性能评价信息安全加密技术对称（私钥）加密技术非对称加密技术（公钥）对称和非对称加密算法的区别数字信封原理数字签…...

编程日记 2025/5/29 10:56:05

MODBUS RTU通信协议详解与调试指南

一、MODBUS RTU简介 MODBUS RTU（Remote Terminal Unit）是一种基于串行通信（RS-485/RS-232）的工业标准协议，采用二进制数据格式，具有高效、可靠的特点，广泛应用于PLC、传感器、变频器等工业设备…...

编程日记 2025/5/29 13:12:22

【深度学习新浪潮】大模型时代，我们还需要学习传统机器学习么？

在大模型时代，AI 工程师仍需掌握传统机器学习知识，这不仅是技术互补的需求，更是应对复杂场景和职业发展的关键。以下从必要性和学习路径两方面展开分析：一、传统机器学习在大模型时代的必要性技术互补性大模型（如GPT、BERT）擅长处理复杂语义和生成任务，但在数据量少…...

编程日记 2025/5/28 22:25:56

深入解析Spring Boot与Spring Security的集成实践

深入解析Spring Boot与Spring Security的集成实践引言在现代Web应用开发中，安全性是一个不可忽视的重要方面。Spring Security作为Spring生态中的安全框架，提供了强大的认证和授权功能。本文将结合Spring Boot，详细介绍如何集成Spring Se…...

编程日记 2025/5/27 4:49:37