vue+webpack项目集成三维框架cesium

       写在前面：看了网上的vue+cesium集成的资料，用webpack2.0   init的项目可以使用。但是集成到自己的项目中就不行。原因是，集成过cesium，启动项目时会生成：http://localhost:8080/cesium/Workers/asdwa.js这样引用文件路径，但是我的项目没有正确打包这些文件。研究半天得到解决办法就是：把需要的文件手动复制到static中，然后配置dev的CESIUM_BASE_URL:JSON.stringify('static/cesium')，prod的CESIUM_BASE_URL:JSON.stringify('./static/cesium')。这两个配置就是把上述生成的文件引用路径指向到我们主动存放文件的路径。

       我这样配之后就能找到文件了。

       我用的IDE是webstorm，项目目录结构为

第一步：

         npm install cesium --save

我是安装了cnpm（使用的淘宝的镜像，国内的快。）

安装完得到

在项目的static目录新建cesium目录，如第一张图。

打开Build\Cesium目录把里面的文件夹都复制到static/cesium下。该目录里有一个js文件，不需要复制。

如图：

接下来进行文件配置：

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

       在文件的最上部分添加一个常量  const cesiumSource ='./node_modules/cesium/Source'

       注意我的文件层级，webpack.base.conf.js和node_modules文件夹是同级的所以./就可以。

      然后：

    output: {
        sourcePrefix: ''
    },复制代码

    amd:{
        toUrlUndefined:true
  },复制代码

module: {
    unknownContextCritical: false,
},复制代码

node: {
    fs: 'empty',
  },复制代码

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

得到这样的配置文件：

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const cesiumSource ='./node_modules/cesium/Source'
module.exports = {
    entry: {
        main: './src/main',
        vendors: './src/vendors'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        sourcePrefix: ''
    },
    amd:{
        toUrlUndefined:true
      },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module: {
        rules: [......],
        // unknownContextRegExp: /^.\/.*$/,
        unknownContextCritical: false,
    },
    node: {
        fs: 'empty',
      },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue': 'vue/dist/vue.esm.js',
            'cesium': path.resolve(__dirname, cesiumSource),//注意要配置这个
            Src: path.resolve(__dirname, 'src/'),
            
        }
    },
};复制代码

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

在plugin中加入下面内容：

plugins: [
    new webpack.DefinePlugin({
        CESIUM_BASE_URL:JSON.stringify('static/cesium')
      }),
],复制代码

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

在plugin中加入下面内容：

plugins: [
    new webpack.DefinePlugin({
        CESIUM_BASE_URL:JSON.stringify('./static/cesium')
      }),
],复制代码

这两个文件一个没有 ./ 一个有。

配置就完事了。

下面是页面：

<template>
    <div id="cesiumContainer">

    </div>
</template>

<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
    export default {
        name: "testCesium",
        mounted(){
            var viewer = new Cesium.Viewer("cesiumContainer")
        }
    }
</script>

<style scoped>

</style>复制代码

然后就是自己配一下路由，

{
    path: '/cesium',
    name: 'cesium',
    meta: {
        title: 'cesium'
    },
    component: (resolve) => require(['./views/testCesium.vue'], resolve)
},复制代码

启动项目，查看页面：