electron-vite搭建的项目引入cesium

最新推荐文章于 2024-04-03 11:08:58 发布

呆呆键盘

最新推荐文章于 2024-04-03 11:08:58 发布

阅读量570

点赞数 1

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/weixin_43688414/article/details/128534418

版权

electron-vite的项目中使用cesium

安装 vite-plugin-cesium 和 cesium 插件

npm i -D vite-plugin-cesium
npm i cesium

如果超时或者报错换一下yarn 或者cnpm

cnpm i -D vite-plugin-cesium
cnpm i cesium

2.electron.vite.config.ts 配置文件中
引入

import cesium from 'vite-plugin-cesium'

render的plugins中加上cesium（）

renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [vue(),cesium(),]
  }

3.使用

<script setup lang="ts">
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer')
})
</script>


<template>
  <div id="cesiumContainer"></div>
</template>

打开发现代码报错了，地球出不来

Uncaught EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’”.
百度看解决说是内容安全策略 (Content Security Policy)
解决是 meta

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' 'unsafe-eval';">

但还是报错。

去掉原来的meta，加上新的meta，发现可以勉强跑通

src/render/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Electron</title>
    <!-- 去掉 安全协议meta 不然cesium引入报错 加上viewport meta -->
    <!-- <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
    /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>