Implementation method of integrating Cesium for vue2.0 project

Install cesium

Execute in existing projects,

npm i cesium

Modify configuration

build/

1. Define the Cesium source code path

const cesiumSource = '../node_modules/cesium/Source'

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./')
//--cesium--Configurationconst cesiumSource = '../node_modules/cesium/Source';

2. Add sourcePrefix to output: ' ' Let webpack handle multi-line strings correctly

3. Configure amd parameters

4. Add unknownContextCritical: false after rules in module,

 = {
  context: (__dirname, '../'),
  entry: {
    app: ["babel-polyfill", './src/']
  },
  output: {
    path: ,
    filename: '[name].js',
    publicPath: .NODE_ENV === 'production' ?
       : ,
    //-cesium-Configuration--------------------------------------------------------------------------------------------------------------------    sourcePrefix: ' '
  },
  //-cesium-Configuration----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------  amd:{
    toUrlUndefined: true
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/',
      '@': resolve('src'),
      //--cesium--Configuration      'cesium': (__dirname, cesiumSource)
    }
  },
  module: {
    rules: [
    ...
    ],
    //-cesium-Configuration--------------------------------------------------------------------------------------------------------------------    //unknownContextRegExp: /^.\/.*$/
    unknownContextCritical: false,
  }
}

build/

1. Define the Cesium source code path and Cesium Workers path

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

(Note that the node_modules here is different, there is no previous.../)

2. Define the CESIUM_BASE_URL variable

3. Add the following plugins to plugins to copy static resources

plugins: [
  new ({
   '': require('../config/'),
   //-cesium-Configuration--------------------------------------------------------------------------------------------------------------------   'CESIUM_BASE_URL': ('') 
  }),
  new (),
  new (), // HMR shows correct file names in console on update.
  new (),
  // /ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
   filename: '',
   template: '',
   inject: true
  }),
  //-cesium-Configuration--------------------------------------------------------------------------------------------------------------------  new CopyWebpackPlugin([ { from: (cesiumSource, cesiumWorkers), to: 'Workers' } ]),   //flag
  new CopyWebpackPlugin([ { from: (cesiumSource, 'Assets'), to: 'Assets' } ]),
  new CopyWebpackPlugin([ { from: (cesiumSource, 'Widgets'), to: 'Widgets' } ]),
  new CopyWebpackPlugin([ { from: (cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ]),
  new CopyWebpackPlugin([ { from: 'ThirdParty', to: 'ThirdParty' } ]),

  // copy custom static assets
  new CopyWebpackPlugin([
   {
    from: (__dirname, '../static'),
    to: ,
    ignore: ['.*']
   }
  ])
 ]

build/

1. Definition

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

2. Define the 'CESIUM_BASE_URL' variable

3. Add the following plugins to plugins to copy static resources

plugins: [
  // /vue-loader/en/workflow/
  new ({
   '': env,
   //-cesium-Configuration----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------   'CESIUM_BASE_URL': ('static')
  }),
  ...
  new HtmlWebpackPlugin({
    ...
  },
  //-cesium-Configuration----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------  new CopyWebpackPlugin([ { from: (cesiumSource, cesiumWorkers), to: 'static/Workers' } ]),//flag
  new CopyWebpackPlugin([ { from: (cesiumSource, 'Assets'), to: 'static/Assets' } ]),
  new CopyWebpackPlugin([ { from: (cesiumSource, 'Widgets'), to: 'static/Widgets' } ]),
  new CopyWebpackPlugin([ { from: (cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ]),
  new CopyWebpackPlugin([ { from: 'ThirdParty', to: 'ThirdParty' } ]),
  ...

ThirdParty

Create a new folder ThirdParty in the project root directory, put the draco_decoder.wasm file, and use it when loading the gltf model file

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.