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

目录

 

一、主要环境介绍

二、环境部署

三、项目搭建与配置

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模式支持

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
    sourcePrefix:'',
  },
  amd:{
    toUrlUndefined:true,  //添加这个设置
  },

（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’