Solve "in ./node_modules/cesium/Source/ThirdParty/zip.js"

created at 10-20-2021 views: 3

First, we first create a vue project

vue create cesium_dome

Then introduce cesium

npm i cesium --save

Configure in vue.config.js

(if you don't have one, create one in the project root directory)

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const cesiumSource = './node_modules/cesium/Source'

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  devServer: {
    port: 8888,
    open: true,

  },
  configureWebpack: {
    output: {
      sourcePrefix: ' ' // 1 Let webpack correctly handle multi-line string configuration amd parameters
    },
    amd: { // 2
      toUrlUndefined: true // webpack can be used in cesium with require friendly
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'components': path.resolve('src/components'),
        'assets': path.resolve('src/assets'),
        'views': path.resolve('src/views'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [ // 4
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'Workers' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
      new webpack.DefinePlugin({ // 5
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ], 
  }
};

Then add in main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
var cesium = require('cesium/Cesium.js');
var widgets = require('cesium//Widgets/widgets.css');

// If aliases are not configured in vue.config.js, use the following method to import by path
// var cesium = require('cesium/Build/Cesium/Cesium.js');
// var widgets = require('cesium/Build/Cesium/Widgets/widgets.css');

Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Create an index.vue

<template>
  <div
    id="container"
    class="box"
  >
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
    }
  },
  methods: {
    init () {
      const Cesium = this.cesium
      const viewer = new Cesium.Viewer('cesiumContainer');
      viewer._cesiumWidget._creditContainer.style.display = "none";// Hide copyright
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang="scss">
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>

The following problems will occur during startup

in ./node_modules/cesium/Source/ThirdParty/zip.js

Because the import.meta syntax is used in the ./node_modules/cesium/Source/ThirdParty/zip.js file, webpack does not support it by default. When building the project, the following error will be reported, and the message needs to add a loader.

Next we install loader

npm install @open-wc/webpack-import-meta-loader --save-dev

yarn add @open-wc/webpack-import-meta-loader --dev

//pick one of two

Then add in vue.config.js (after plugins[...])

 module: {
      rules: [
      {
      test: /\.js$/,
      use: {
      loader: '@open-wc/webpack-import-meta-loader',
      },
      },
    ]}

Then we run again

earth

created at:10-20-2021
edited at: 10-20-2021: