vueCli導入Cesium

インストールcesium

cnpm install cesium --save

vue.config.jsでconfigureWebpack

を構成する

const webpack = require("webpack");
const CopyWebpackPlugin = require('copy-webpack-plugin')
const cesiumSource = 'node_modules/cesium/Build/Cesium'

module.exports = {
     
	...//     

	  configureWebpack: (config) => {
     
    let plugins = []
    if (process.env.NODE_ENV === 'production') {
     
      plugins = [
        new webpack.DefinePlugin({
     
          CESIUM_BASE_URL: JSON.stringify('static')
        }),
        new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Workers'), to: 'static/Workers' }]),
        new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' }]),
        new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'ThirdParty'), to: 'static/ThirdParty' }]),
        new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' }])
      ]
    } else {
     
      plugins = [
        new webpack.DefinePlugin({
     
          CESIUM_BASE_URL: JSON.stringify('')
        }),
        new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Workers'), to: 'Workers' }]),
        new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
        new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }]),
        new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }])
      ]
    }
    return {
     
      module: {
     
        unknownContextCritical: false,
        rules: [
          {
     
            test: /\.js$/,
            enforce: 'pre',
            include: path.resolve(__dirname, 'node_modules/cesium/Source'),
            sideEffects: false,
            use: [
              {
     
                loader: 'strip-pragma-loader',
                options: {
     
                  pragmas: {
     
                    debug: false
                  }
                }
              }
            ]
          }
        ]
      },
      optimization: {
     
        usedExports: true,
        splitChunks: {
     
          maxInitialRequests: Infinity,
          minSize: 0,
          maxSize: 250000,
          cacheGroups: {
     
            vendor: {
     
              test: /[\\/]node_modules[\\/]/,
              priority: -10,
              chunks: 'all',
              name(module) {
     
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                return `npm.${
       packageName.replace('@', '')}`
              }
            },
            commons: {
     
              name: 'Cesium',
              test: /[\\/]node_modules[\\/]cesium/,
              priority: 10,
              chunks: 'all'
            }
          }
        }
      },
      output: {
     
        sourcePrefix: ' '
      },
      amd: {
     
        toUrlUndefined: true
      },
      resolve: {
     
        alias: {
     
          vue$: 'vue/dist/vue.esm.js',
          '@': path.resolve('src')
        }
      },
      node: {
     
        fs: 'empty',
        Buffer: false,
        http: 'empty',
        https: 'empty',
        zlib: 'empty'
      },
      plugins: plugins
    }
  }
}

vueページcesium

を使用

<template>
  <div id="cesiumContainer">div>
template>
<script>
import 'cesium/Build/Cesium/Widgets/widgets.css'
import {
       Viewer } from 'cesium'
import * as Cesium from "cesium/Source/Cesium.js"
export default {
      
  name: 'CesiumContainer',
  mounted() {
      
    new Viewer('cesiumContainer')
  }
}
script>

以上のコードでvueにcesiumが導入された場合はimport * as Cesium from "cesium/Source/Cesium.js"が導入すべきであり、import Cesium from 'cesium/Cesium'が導入された場合はwas not found in 'cesium/Cesium'がエラーとなる.これはCesium 1.63バージョン以前はAMDでコンパイルされていたが、1.63バージョンではES 6で再構築されていたため、1.63以降のバージョンではモジュール導入時に上記のような方式を使用すべきである.

最終効果参考:https://github.com/ShareQiu1994/cesium-vue