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的项目：

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>

运行效果