cesium + vue初始化项目

一.初始化vue项目

   vue create demo // 这里用的脚手架是4.5

二.下载cesium

    npm i cesium -S // 这里用1.87.1版本

三.配置webpack

• 首先去根据文档获取一个token： cesium.com/learn/cesiu…
• 装loader配置插件：

npm i  *@open-wc/webpack-import-meta-loader* -S

• 自己配置webpack的vue.config.js文件

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  configureWebpack: {
    amd: {
      // Enable webpack-friendly use of require in Cesium
      // Tells Cesium that the version of AMD webpack uses to evaluate require statements is not compliant with the standard toUrl function
      toUrlUndefined: true
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: '@open-wc/webpack-import-meta-loader',
          },
          // include: path.resolve(__dirname, 'node_modules/cesium/Source')
        },
      ],
      unknownContextCritical: false
    },
    plugins: [
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium/Workers',
          to: 'cesium/Workers'
        }
      ]),
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium/ThirdParty',
          to: 'cesium/ThirdParty'
        }
      ]),
      new CopyWebpackPlugin([
        { from: 'node_modules/cesium/Build/Cesium/Assets', to: 'cesium/Assets' }
      ]),
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium/Widgets',
          to: 'cesium/Widgets'
        }
      ]),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('./cesium')
      })
    ],
  }
}