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>
运行效果
