美文网首页我爱编程
vue项目使用原生cesium,修改webpack配置

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

作者: 狮子座_亚亚 | 来源:发表于2018-08-09 13:53 被阅读0次

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

    相关文章

      网友评论

        本文标题:vue项目使用原生cesium,修改webpack配置

        本文链接:https://www.haomeiwen.com/subject/byzrzttx.html