基于webpack 构建Cesium + Vue 的应用

本文介绍如何使用WebPack 打包 Cesium Vue 应用
作为一个前端小白，在动手之前必定要一番百度，在学习过程中，参考了以下博客

• 基于Webpack的Cesium+Vue应用
• Cesium and Webpack
  先给出我最终配置完毕的github 仓库 https://github.com/QingMings/qm-cesium
  以下为过程记录

一. 环境介绍

项目环境	版本
Nodejs	v8.1.3
npm	5.0.3
yarn	1.3.2
Vue	2.5.2
Vue-cli	2.9.3
WebPack	3.6.0
Cesium	1.4.3

二. 安装环境

1. 安装nodejs ,各个系统上具体怎么安装，详情请百度.

2. 安装Vue-cli

 

~$ npm install -g vue-cli
~$ vue -V  //查看vue-cli的版本
2.9.3

3. 安装Yarn yarn 和 npm两个都可以完成依赖包的下载安装，装不装都行

 

~$ npm install --global yarn
~$ yarn -V
1.3.2

三. 创建项目

1. 使用vue-cli 创建Webpack 模板项目

 

~$ vue init webpack qm-cesium //qm-cesium 是项目名称，填写你的项目名称
//之后是一系列项目的配置，按个人需要选择就好

2. 安装依赖

使用vue-cli 创建项目一般最后会执行 npm 或者 yarn
如果没有执行，就执行以下

3. 进入项目文件夹运行项目

 

~$ cd qm-cesium
~$ npm run dev

正常情况下 在浏览器输入http://localhost:8080 就可以看到vue的界面了

四. 安装Cesium 环境

npm: npm install cesium --save
yarn: yarn add cesium

1.配置webpack.base.conf.js文件

进入build 文件夹，编辑webpack.base.conf.js
定义 Cesium 源码路径
const cesiumSource = '../node_modules/cesium/Source'
在output 里加入sourcePrefix: ' ' 让webpack 正确处理多行字符串
配置 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
  }

在resolve 中设置 别名 'cesium': path.resolve(__dirname, cesiumSource)

 

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

在module 中加入 unknownContextCritical: false, 让webpack 打印载入特定库时候警告
在module 中加入 unknownContextRegExp: /^.\/.*$/ 解决Error: Cannot find module "."的错误

 

module: {
    rules: [
     .....
    ]，
//加了这个好像会出一些问题，这里先注释掉了 2018-09-04
    // unknownContextRegExp: /^.\/.*$/，
    unknownContextCritical: false
  }

2. 配置 webpack.dev.conf.js 文件

进入build文件夹，编辑 webpack.dev.conf.js文件
定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有../）
const cesiumSource = 'node_modules/cesium/Source'
定义 Cesium Workers 路径
const cesiumWorkers = '../Build/Cesium/Workers'
在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({
      // Define relative base path in cesium for loading assets
      CESIUM_BASE_URL: JSON.stringify('')
    }),

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

进入 build 文件夹，编辑webpack.prod.conf.js文件
定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有../）
const cesiumSource = 'node_modules/cesium/Source'
定义 Cesium Workers 路径
const cesiumWorkers = '../Build/Cesium/Workers'
在plugins 中加入下面插件,拷贝静态资源
注意这里的CESIUM_BASE_URL: JSON.stringify('./')与dev 配置的不同，这是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文件

进入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: '',
    ......
    }

编写Vue组件

在src/components下新建 cesiumViewer.vue vue组件，

 

<template>
    <div id="cesiumContainer">
    </div>
</template>
<script type="text/javascript">
export default {
  name: 'cesiumViewer'
}
</script>
<style>

</style>

修改src/router下的index.js 文件为

 

/* eslint-disable no-unused-vars */
import Vue from 'vue'
import Router from 'vue-router'
import cesiumViewer from '@/components/cesiumViewer'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'cesiumViewer',
      component: cesiumViewer
    }
  ]
})

修改 src 下的 App.vue 文件

 

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  html, body, #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
</style>

最后修改 src 下的 main.js

 

import Vue from 'vue'
import App from './App'
import router from './router'
import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>',
  mounted () {
    // var viewer = new Cesium.CesiumWidget('cesiumContainer')
    var viewer = new Cesium.Viewer('cesiumContainer')
  }
})

然后 npm run dev ，在浏览器输入http://localhost:8080 成功！

结束

链接：https://www.jianshu.com/p/fb237c7eb48c