vue-cli引入cesium

1、vue 工程建立及cesium 安装

vue init webpack cesium-demo
npm i cesium --save

2、webpack 配置

1.webpack.base.conf.js中设置cesium源码的路径

定义Cesium源码路径const cesiumSource = '…/node_modules/cesium/Source’

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

在resolve中设置别名 ‘cesium’: path.resolve(__dirname, cesiumSource)，定义别名cesium后，cesium表明了cesiumSource的文件路径

在modules的rules中再增长两行，unknownContextRegExp: /^.\/.*$/,unknownContextCritical:false

2.webpack.dev.conf.js 文件中添加 static files 管理

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


plugins: [
  ...
      /* cesium */
    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({
      // Define relative base path in cesium for loading assets
      CESIUM_BASE_URL: JSON.stringify('')
    })
    
]

3.配置 webpack.prod.conf.js 文件

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


plugins: [
   ...
   /* cesium */
    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({
      // Define relative base path in cesium for loading assets
      // 定义 Cesium 从哪里加载资源，若是使用默认的''，却变成了绝对路径了，因此这里使用'./',使用相对路径
      CESIUM_BASE_URL: JSON.stringify('./')
    })
]

4.配置config/index.js文件,配置 build 下的assetsPublicPath 为' '

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    ...
}

5.在组件中单独应用

<template>
 2   <div id="app">
 3     <div id="cesiumContainer"></div>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 import Cesium from 'cesium/Cesium'
 9 import 'cesium/Widgets/widgets.css'
10 export default {
     ...
12 mounted () {
13     this.initMap()
17 } 
   methods:{
     initMap(){
      const viewer = new Cesium.Viewer('cesiumContainer' )   
     console.log(viewer)
  }
}
19 </script>
20 <style>
21 
28 #app,#cesiumContainer {
30   width: 100%;
31   height: 100%;
32   overflow: hidden;
33 }
34 </style>

 6.或者在main.js中全局注册

//全局引用cesium
import Cesium from "cesium/Cesium";
import"../node_modules/cesium/Source/Widgets/widgets.css";

//全局注册变量
Vue.prototype.Cesium=Cesium;