Vue+Cesium development environment construction (based on Cesium1.74)

1. Build a VUE project¶

Use the vue-cli tool to create a vue project: (make sure node.js is installed)

vue init webpack cesiumtest

2. Open the project with webstrom¶

(other coding tools are also available)

3. Install cesium¶

In the configuration file package.json, add "cesium": "^1.74.0", as shown in the figure, run npm install after the configuration is complete, here we will do the follow-up configuration first, and run it together.

4. Modify the configuration file for webpack configuration¶

Need to modify the three files webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js

4.1 Modify webpack.base.conf.js

4.1.1 Define the Cesium source code path:

const cesiumSource ='../node_modules/cesium/Source' //Define Cesium source code path
const cesiumWorkers = path.join(cesiumSource,'Workers');

4.1.2 Let webpack correctly handle multi-line strings, add sourcePrefix: '' in output

output: {
     path: config.build.assetsRoot,
     filename:'[name].js',
     publicPath: process.env.NODE_ENV ==='production'
       ? config.build.assetsPublicPath
       : config.dev.assetsPublicPath,
       sourcePrefix: '' //Let webpack handle multi-line strings correctly
   },

4.1.3 Set cesium alias, cesium: path.resolve(__dirname, cesiumSource) //Set cesium alias

You need to set the cesium alias in the resolve, so that you can find the Cesium package based on the alias when it is introduced.

(Note: You don’t need to set the alias. The import package is to directly import the "cesium/Source/Cesium.js". In fact, the purpose of setting the alias is to make the "alias" point to the /node_modules/cesium/Source directory)

resolve: {
     extensions: ['.js','.vue','.json'],
     alias: {
       'vue$':'vue/dist/vue.esm.js',
       '@': resolve('src'),
       cesium: path.resolve(__dirname, cesiumSource) //Set cesium alias
     }
   },

4.1.4 Prevent dependency warnings
Add unknownContextCritical:false to the module

module: {
    rules:[
    ...
    ],
    unknownContextCritical: false,//Prevent dependency warnings
}

4.2 Configure webpack.dev.conf.js

4.2.1 Define the path:

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

4.2.2 Add the following plugins under plugins:

new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), 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({
   // Define relative base path in cesium for loading assets
   CESIUM_BASE_URL: JSON.stringify('')
})

4.3 Configure webpack.prod.conf.js file

4.3.1 Define the path:

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

4.3.2 Add the following plugins under plugins:

new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), 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({
    // Note that the configuration here is different from dev
    // Define where Cesium loads resources. If you use the default'', it becomes an absolute path, so here use'./' and use a relative path
    CESIUM_BASE_URL: JSON.stringify('./')
})

5. Write Vue components¶

5.1 Create a new component named earth.vue under src/view. There is no need to create a new directory in the view directory, which is used to place the vue component page. The earth.vue code is as follows:

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

<script>
    import { Viewer } from 'cesium/Cesium'
    import  'cesium/Widgets/widgets.css'
    export default {
        name: "earth",
        data() {
            return {};
        },
        mounted() {
            let viewer = new Viewer("cesiumContainer");
        }
    };
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
  }
  #cesiumContainer {
    width: 100%;
    height: 100vh;
  }
</style>

import Cesium from'cesium/Cesium' cannot be used here to import modules, because Cesium 1.63 uses ES6. The above method should be used

5.2 Register components in App.vue

5.3 Modify routing, router.js

Part of the routing of the newly added earth component is as follows

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import earth from '@/view/earth'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
        path: '/earth',
      name: 'earth',
      component: earth
    }
  ]
})

6. Install the plugin¶

npm install

7. Project operation¶

npm run dev

8. Running results¶