栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

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

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/240569.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号