vue 中引入1.71版本cesium

1、安装cesium

npm install --save  [email protected]

2、配置webpack.base.conf.js

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

output添加sourcePrefix: ' '

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
      sourcePrefix: ' '
  }

 resolve中添加cesium: path.resolve(__dirname, cesiumSource)

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

module中添加 unknownContextCritical: false,
    unknownContextRegExp: /^.\/.*$/,

 module: {
    rules: [
     ...
    ],
    unknownContextCritical: false,
    unknownContextRegExp: /^.\/.*$/,
  },

3、配置 webpack.dev.conf.js

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

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、配置webpack.prod.conf.js文件

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

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('')
})

5、使用

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

<script>
import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
  name: 'App',
  mounted () {
    this.$nextTick(() => {
      const viewer = new Cesium.Viewer('cesiumContainer')
    })
  }
}
</script>
<style>
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#app,#cesiumContainer {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

6、效果