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')