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

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

news 2025/5/18 8:03:20

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>