Vue+ElementUI框架集成Cesium

版本信息

1.Vue-cli：2.9.6
2.element-ui：2.13.0
3.Cesium：1.64.0

流程

Vue+ElementUI安装

请查考Vue-cli+ElementUI环境搭建

Cesium安装

使用npm安装

npm install cesium --save

Cesium与Vue集成配置

webpack.base.conf.js配置

1.在文件开头添加Cesium的Source路径

const cesiumSource = '../node_modules/cesium/Source'

文件开头像这样：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
//添加Cesium的Source路径
const cesiumSource = '../node_modules/cesium/Source'

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
......

2.在output 里加入sourcePrefix: ’ ’ 让webpack 正确处理多行字符串

 output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
    //Needed to compile multiline string in cesium------
    sourcePrefix: ' '
  },

3.添加amd

  amd: {
    // Enable webpack-friendly use of require in cesium
    toUrlUndefined: true
  },

4.设置cesium的别名
在resolve中添加Cesium的别名：

'cesium': path.resolve(__dirname, cesiumSource)

resolve中的内容如下：

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      //设置cesium的别名
      'cesium': path.resolve(__dirname, cesiumSource)
    }
  },

5.添加rule规则

 //过滤掉运行过程中cesium的错误信息
 {
    test: /\.js\.map$/,
    use: [{
      loader: 'file-loader'
    }]
  }

6.去掉webpack打印载入特定库时的警告

 //不让webpa打印载入特定库时候的警告
 unknownContextRegExp: /^.\/.*$/,
 unknownContextCritical: false

webpack.dev.conf.js配置

1.在文件头部添加cesium源码与workers路径

//定义cesium源代码路径，前面没有.../
const cesiumSource = 'node_modules/cesium/Source'
//定义cesium workers路径
const cesiumWorkers = '../Build/Cesium/Workers'

2.在plugins new webpack.DefinePlugin中添加CESIUM_BASE_URL

 new webpack.DefinePlugin({
      'process.env': require('../config/dev.env'),
      // Define relative base path in cesium for loading assets
      CESIUM_BASE_URL: JSON.stringify('')
    }),

3.在plugins中添加将Cesium Assets,Widgets和Workers拷贝到static目录下的配置

    // Copy Cesium Assets, Widgets, and Workers to a static directory
    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'
    }]),

最终plugins内容如下：

 plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env'),
      // Define relative base path in cesium for loading assets
      CESIUM_BASE_URL: JSON.stringify('')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
      // Copy Cesium Assets, Widgets, and Workers to a static directory
    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'
    }]),

    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

webpack.prod.conf.js配置

1.定义Cesium源代码和workers路径

//定义cesium源代码路径，前面没有.../
const cesiumSource = 'node_modules/cesium/Source'
//定义cesium workers路径
const cesiumWorkers = '../Build/Cesium/Workers'

2.定义CESIUM_BASE_URL

  new webpack.DefinePlugin({
      'process.env': env,
      //--cesium--配置
      CESIUM_BASE_URL: JSON.stringify('./')
    }),

3.在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'
    }]),

最终plugins内容如下：

 plugins: [
     // Copy Cesium Assets, Widgets, and Workers to a static directory
    // Copy Cesium Assets, Widgets, and Workers to a static directory
    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'
    }]),

    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env,
      //--cesium--配置
      CESIUM_BASE_URL: JSON.stringify('./')
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

测试

在HelloWorld.vue中添加代码

<template>
  <div class="hello">
    <div id = 'cesiumContainer'></div>
  </div>
</template>

<script>
import * as Cesium from 'cesium/Cesium';
import widgets from 'cesium/Widgets/widgets.css';

export default {
  name: 'HelloWorld',
  data () {
    return {

    };
  },
  mounted () {
    var viewer = new Cesium.Viewer('cesiumContainer');
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

运行程序，可看到如下界面，说明配置成功。

扫描下方二维码，关注微信公众号，精彩内容同步更新，有问题可随时交流