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

vue引用cesium,解决"Not allowed to load local resource"报错@TOC

工具 vscode

  1. node :v22.14.0
  2. npm :10.9.2
  3. vue:@vue/cli 5.0.8

一、创建一个 Vue 3 项目

1.创建名为cesium_test的项目:

javascript 复制代码
vue create cesium_test

2.选择默认的 Vue 3

二、安装 Cesium 包

javascript 复制代码
npm install cesium --save

三、修改配置文件

打开 vue.config.js 文件,修改为如下内容(前期因为此文件未配置正确,造成"Not allowed to load local resource"错误):

javascript 复制代码
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文件

javascript 复制代码
<!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文件

javascript 复制代码
<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>

运行效果

相关推荐
四月_h4 分钟前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate27 分钟前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古1 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers
疯狂踩坑人3 小时前
【万字长文】让面试没有难撕的JS基础题
javascript·面试
极客小俊3 小时前
【浅谈javascript禁术】 eval函数暗藏玄机?
javascript
533_4 小时前
[element-plus] el-select 下拉选择图片
vue.js
李明卫杭州4 小时前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-4 小时前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
小*-^-*九4 小时前
Electron vue项目 打包 exe文件2
javascript·vue.js·electron
zhengjianyang&1234 小时前
美团滑块-[behavior] 加密分析
javascript·经验分享·爬虫·算法·node.js