vue-cli3+cesium npm引入和官网静态引入

方法一：

首先创建好vue-cli3的项目，这个就不用说了。

然后运行 npm install --save cesium安装cesium

配置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: 8888
    },
    configureWebpack: {
        output: {
            sourcePrefix: ' '
        },
        amd: {
            toUrlUndefined: true
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                'components': path.resolve('src/components'),
                'assets': path.resolve('src/assets'),
                'views': path.resolve('src/views'),
                '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('./')
            })
        ]
    }
}

main.js中插入，这里有两个方法一个是npm install 安装的引入(ps：不需要改cesium源码)，另一种是在官网下载cesium包直接放入（ps:适用于项目需要修改源码）：

//npm install cesium引入方法
// var Cesium = require('cesium/Cesium');
// var widgets= require('cesium/Widgets/widgets.css');

/**静态cesium包下载引入 */
var Cesium = require('./Cesium/Cesium.js');
var widgets= require('./Cesium/Widgets/widgets.css');
 
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

官网静态资源引入会有一个坑，运行项目时会提醒：

[BABEL] Note: The code generator has deoptimised the styling of "xxx.js" as it exceeds the max of "500KB".

解决这个方法就是在babel.config.js中添加 compact: false 可参考 http://www.imooc.com/wenda/detail/497480

修改helloword代码

<!--  -->
<template>
  <div id="cesiumContainer">

  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  mounted () {
        var viewer = new Cesium.Viewer('cesiumContainer')
        console.log(viewer)
    },

  methods: {}
}

</script>
<style lang='less' scoped>
 #cesiumContainer {
        width: 100%;
        height: 100%;
        
    }
</style>

然后运行npm run dev

这时可能会报关于require的警告，这个是新版本不支持整体import，可以参考：https://blog.csdn.net/weizhixiang/article/details/104473856

我们只需要把helloword 中mounted的 var viewer = new Cesium.Viewer('cesiumContainer')改成

 var viewer = new this.Cesium.Viewer('cesiumContainer')

就可以运行了

方法二：将cesium的文件放入public文件中再index.html用script标签引入，记住不能将cesium放在assets中在引入会失败。

代码可参考https://github.com/GPBOB/vue-cesium