vue 2.x+webpack+cesium1.64（1）详解：环境部署、项目搭建与配置

曾经终败给现在 2021-07-24 13:38 542阅读 0赞

**目录**

一、主要环境介绍

二、环境部署

三、项目搭建与配置

1、创建项目

2、安装Cesium环境

3、配置build/webpack.base.conf.js文件

4、配置webpack.dev.conf.js文件

5、配置webpack.prod.conf.js文件

6、配置config/index.js文件

四、helloword式起步开发

五、备注

--------------------

# 一、主要环境介绍 #

*  NodeJs：最起码8以上吧
 *  npm：6以上吧
 *  vue：2.9.6
 *  webpack：3.6.0
 *  Cesium：1.64

# 二、环境部署 #

上面那些环境都给部署好即可，先不用部署cesium

# 三、项目搭建与配置 #

## 1、创建项目 ##

vue init webpack projectname  
    //projectname是项目名称，自己取

## 2、安装Cesium环境 ##

//首先保证进入了项目所在的文件夹
    npm install  cesium  --save

## 3、配置build/webpack.base.conf.js文件 ##

（1）定义cesium源码路径

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

（2）output中加入sourcePrefix: ' '，让webpack可以正确处理多行字符串；

output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath,
        sourcePrefix:'',  //添加这一行
      },

（3）添加amd模式支持

（4）resolve中别名设置，引入时候直接根据别名就可以找到cesium包

resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          // Cesium module name
         'cesium': path.resolve(__dirname, cesiumSource),   //添加这一句
        }
      },

（5）module中加入`unknownContextCritical: false,` 让webpack 打印载入特定库时候警告

module: {
        rules: [
          ...
        ],
        //不让webpack打印载入特定库时候发出警告
        unknownContextCritical:false,
        // unknownContextRegExp: /^.\/.*$/,   //这个很多都推荐了，但是实测的时候发现会报错，先不用
      },

## 4、配置webpack.dev.conf.js文件 ##

（1）该文件开头位置，定义cesium源码路径，定义cesium workers路径

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

（2）plugins中加入插件，拷贝静态资源

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

## 5、配置webpack.prod.conf.js文件 ##

（1）该文件开头部分，添加cesium源码路径，定义cesium workers路径

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

（2）plugins中加入插件，拷贝静态资源。注意这里的`CESIUM_BASE_URL: JSON.stringify('./')`与`dev` 配置的不同，这里需要配置相对路径。

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('./')
        }),

## 6、配置config/index.js文件 ##

配置config文件夹下的index.js文件，这个文件有dev、build两个配置项目，在build配置项下，配置`assetsPublicPath为''。`

build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '',  //修改这个地方
    }

# 四、helloword式起步开发 #

整个vue文件，路由挂载上，能正常显示出来后，写cesium的helloWorld式起步功能，让那个立体球球能显示出来：

其中注意

（1）cesium导入的方式，1.6版本以后只能通过require导入了，之前网上的几乎都是通过import导入，实测不行。

（2）cesiumContainer样式自己写

<template>
      <div class="hello">
        <div id="cesiumContainer"></div>
      </div>
    </template>
    
    <script>
    //import Cesium from 'cesium/Cesium'  //cesium1.6以前支持immport导入，1.6以后不支持了，采取下面的措施
    let Cesium = require('cesium/Cesium')    //cesium1.6版本以后导入的方式
    import 'cesium/Widgets/widgets.css'
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      mounted(){
        Cesium.Ion.defaultAccessToken = '自己申请token'; 
        const viewer = new Cesium.Viewer('cesiumContainer')
      },
    }
    </script>

# 五、备注 #

正常运行后，在界面底部会有一个 access token 的提示，去官网上申请一个  [access token][] ，在 new Cesium.Viewer 前添加 一行代码：

Cesium.Ion.defaultAccessToken = ‘your_access_token’

![20191210155319997.png][]

[access token]: https://cesium.com/ion/signin
[20191210155319997.png]: /images/20210724/c52ce5a0ca39409c9d4280f3e0203b78.png