vuecli3集成cesium

 一、安装Cesium

npm i cesium --save

二、新建vue.config.js文件，增加以下配置

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const debug = process.env.NODE_ENV !== 'production'
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
    publicPath: '',
    devServer: {
        port: 9999
    },
    configureWebpack: {
        output: {
            sourcePrefix: ' '
        },
        amd: {
            toUrlUndefined: true
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                'cesium': path.resolve(__dirname, cesiumSource)
            }
        },
        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({
                CESIUM_BASE_URL: JSON.stringify('./')
            })
        ]
    }
}

三、引入Cesium。在使用Cesium的vue组件中导入Cesium。

import * as Cesium from "cesium/Cesium";
import * as widgets from "cesium/Widgets/widgets.css";

四、报错。启动项目报下面的错误

 由于在 ./node_modules/cesium/Source/ThirdParty/zip.js 文件中使用了 import.meta 语法，webpack默认不支持，在进行项目构建时，会报如下错误，提示信息需要添加 loader。

五、安装loader

npm install @open-wc/webpack-import-meta-loader --save-dev

六、配置vue.config.js文件

在plugins[…]后面添加以下内容

module: {
            rules: [{
                test: /\.js$/,
                use: {
                    loader: '@open-wc/webpack-import-meta-loader',
                },
            }, ]
        }