基于webpack 构建Cesium + Vue 的应用

【更新】Vue-cli 3.0 + cesium 构建

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

一. 环境介绍
项目环境版本
Nodejsv8.1.3
npm5.0.3
yarn1.3.2
Vue2.5.2
Vue-cli2.9.3
WebPack3.6.0
Cesium1.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_moduleswebpack.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_moduleswebpack.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文件
这里有 devbuild 两个 配置项
配置 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 成功!

结束

    原文作者:QingMings
    原文地址: https://www.jianshu.com/p/fb237c7eb48c
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞