手记

vue项目使用原生cesium,修改webpack配置

首先安装cesium

npm install cesium --save-dev

然后需要修改webpack配置

以下内容仅做备忘使用,当前项目测试没问题

下面详细解说

webpack.base.conf.js


添加代码

const CopyWebpackPlugin = require('copy-webpack-plugin')

// The path to the Cesium source code

const cesiumSource = path.resolve(__dirname, '../node_modules/cesium/Source')

const cesiumWorkers = '../Build/Cesium/Workers'

output: {

    // Needed to compile multiline strings in Cesium

    sourcePrefix: '',

}

alias: {

// Cesium module name

'cesium': path.resolve(__dirname, cesiumSource),

}

module: {

unknownContextCritical: false,

rules: [

    {

    test: /\.js$/,

    loader: 'babel-loader',

     include: [resolve('src'), resolve('test'),resolve('node_modules/webpack-dev-server/client')]

    }

 ]

}

plugins: [

    // Copy Cesium Assets, Widgets, and Workers to a static directory

    new CopyWebpackPlugin([      {

        //from: path.join(cesiumSource, 'Workers'),

        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'      }    ]),

]

webpack.dev.conf.js

const path = require('path')

const CopyWebpackPlugin = require('copy-webpack-plugin')

devServer: {

    // historyApiFallback: true

        historyApiFallback: {      rewrites: [        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },      ],    },

        contentBase: config.build.assetsRoot, // for Cesium

}

plugins: [

    new webpack.DefinePlugin({

    'process.env': require('../config/dev.env'),

    // Define relative base path in cesium for loading assets         

     CESIUM_BASE_URL: JSON.stringify('/')    }),

    // copy custom static assets

    new CopyWebpackPlugin([      {        from: path.resolve(__dirname, '../static'),        to: config.dev.assetsSubDirectory,        ignore: ['.*']      }    ]),

]

webpack.prod.conf.js

plugins: [

    new webpack.DefinePlugin({

        'process.env': env,

        // Define relative base path in cesium for loading assets

        CESIUM_BASE_URL: JSON.stringify('/')    }),

]

用法

地图模块

const Cesium = require('cesium/Cesium')

require('cesium/Widgets/widgets.css')



作者:狮子座_亚亚
链接:https://www.jianshu.com/p/d681401e0387


0人推荐
随时随地看视频
慕课网APP