electron-vue 中使用Cesium

使用cesium源码方式

实现思路：参照cesium的webpack 配置方法

• package.json 中引用Cesium
• 在webpack.renderer.config.js 添加如下配置

// Cesium源码所在目录
const cesiumSource = '../node_modules/cesium/Source'
const cesiumSource2 = './node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

• 再增加一些配置项

  output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        //需要编译Cesium中的多行字符串 
        sourcePrefix: ''
    },
    amd: {
        //允许Cesium兼容 webpack的require方式 
        toUrlUndefined: true
    },
    node: {
        // 解决fs模块的问题（Resolve node module use of fs）
        fs: 'empty'
    },

• 增加一个 cesium 别名（alias） ，我们就很容易的在项目里引用，就像一个传统的Node 模块

 resolve: {
        alias: {
            // Cesium模块名称
            cesium: path.resolve(__dirname, cesiumSource)
        }
    },

• 在 rendererConfig.plugins.push 中添加如下配置，在development(!production) 环境下添加如下

  // 拷贝Cesium 资源、控价、web worker到静态目录
    new CopyWebpackPlugin([{ from: path.join(cesiumSource2, cesiumWorkers), to: 'Workers' }]),
    new CopyWebpackPlugin([{ from: path.join(cesiumSource2, 'Assets'), to: 'Assets' }]),
    new CopyWebpackPlugin([{ from: path.join(cesiumSource2, 'Widgets'), to: 'Widgets' }]),
    new webpack.DefinePlugin({
      //Cesium载入静态的资源的相对路径
      CESIUM_BASE_URL: JSON.stringify('')
    })

在production 环境下，CESIUM_BASE_URL修改为如下

  //Cesium载入静态的资源的相对路径
  CESIUM_BASE_URL: JSON.stringify('./')

• 具体使用 ,

import Cesium from 'cesium/Cesium';
//导入必须的样式表
require('cesium/Widgets/widgets.css');

• 打包后调试
  在主进程中的src/main/index.js中添加mainWindow.openDevTools();可以在打包后显示F12调试工具

使用打包后的cesium，放在static 目录下

cesium 放在static 目录下在打包后不能使用，是因为打包后static目录发生了变化，重新指定打包后的static目录即可。
在App.vue中的mounted添加如下代码，动态引入cesium的js和css文件即可。

   let cssUlr="",jsUrl="";
    if (process.env.NODE_ENV === "production ") {
       cssUlr=__static + "/Cesium/Widgets/widgets.css";
        jsUrl=__static + "/Cesium/Cesium.js";
    }else{
        cssUlr="static/Cesium/Widgets/widgets.css";
        jsUrl="static/Cesium/Cesium.js";
    }

    const head = document.getElementsByTagName('head')[0];
    const link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = cssUlr;
    head.appendChild(link);

    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = jsUrl;
    head.appendChild(script);