记录vue/cli5.04 引入cesium@1.98.1版本报错异常以及引入cesium的坑

在使用vue/cli5.04引入cesium@1.98.1版本时，运行时遇到cesium is undefined报错，以及一开始引入正常，多次刷新引入失败。

此方法不唯一，方法来源百度，若不成功，自行百度解决。

一、引入cesium，本案例引入cesium@1.98.1版本（高版本会带有引入cesium方法失败问题，可能是vue2版本太低或webpack没有配置正常导致，自行百度）

1，下载包

npm install cesium@1.98.1 -S 或  yarn add  cesium@1.98.1 -S

2，将下载后的文件从node_modules中复制一部分到public文件夹下

3，在index.html中引入js文件和css文件

<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script src="./Cesium/Cesium.js"></script>  

注意： 放在body内

4，使用cesium

<template>
   <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
</template><script>
export default{
    name:'cesium',
    mounted(){
         Cesium.Ion.defaultAccessToken = 'your token';
         const viewer = new Cesium.Viewer('cesiumContainer');
         console.log(viewer)
   }
}
</script>

注意：若想要在data中实例化Cesium.Viewer，请在构造函数中全局对象上挂载或在window上挂载，虽然在单组件中不会有任何影响，问题出现在当cesium导入大量数据渲染时，导致页面异常卡顿或不加载，原因是viewer与vue中的data或者computed进行了绑定，导致vue对viewer进行了数据劫持，劫持了太多数据。导致异常加载或卡顿。

5，问题出现在加载cesium多次过程中

现象：首次或前几次加载页面以及渲染页面都没有任何问题，经过反复加载引入有cesium的页面时却无法显示地图。

经过多次研究以及排查，最终在一篇issue回答中找到问题所在

如果vue中模式为mode: 'history'，可以变成 hash  模式或者在index.html引入的时候，将相对路径转换成绝对路径，比如：
相对路径：<script src="./cesium/Cesium.js"></script>
绝对路径：<script src="/powerbi.js"></script>

当即恍然大悟，问题的关键就是关键的问题，oh my gad ， please no ！

回过头来，查看了router.js 文件，没错就是’history’,当然为了项目我改成了绝对路径，如何抉择请根据自己的需求修改。

二、main.js引入（此方法我未成功，webpack与vue版本太多羁绊，网上各种配置，导致我无法根据我的配置来配置，或许你可以呢）

1,安装依赖

npm install cesium@1.98.1 -S 或者yarn add cesium@1.98.1 -S

npm install copy-webpack-plugin@5.00 -S 或者yarn add copy-webpack-plugin@5.00 -S （此版本与vue/cli版本相关联，如若报错自行百度）

2，配置vue.config.js

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

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

module.exports = {
    publicPath: "./",
    outputDir: "dist",
    lintOnSave: false,
    devServer: {
        open: process.platform === "darwin",
        host: "0.0.0.0",
        port: 5000,
        https: false,
        hotOnly: false
    },
    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('./')
            })
        ],
        module: {
            unknownContextCritical: /^.\/.*$/,
            unknownContextCritical: false
        }
    }
};

3,main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//引入cesium相关文件
const Cesium = require('cesium/Cesium');
//或者
import * as Cesium from "cesium/Cesium";

Vue.prototype.Cesium = Cesium

new Vue({
    render: h => h(App)
}).$mount('#app')

4,使用cesium，同上方法一

最后我想说在学习的路上没有一条路是最捷径的，一步一个脚印的走下去，走多了，路走通了，再去寻找捷径的路。