为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Vue.js

首先安装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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消