Vue引入Cesium webpack配置记载

1、安装Cesium

npm install cesium@1.70 --save

2、配置webpack.base.conf.js （build/）

const cesiumSource = '../node_modules/cesium/Source'
//output中添加sourcePrefix
output: {
   sourcePrefix: ''
},
//resolve里alias添加名称
alias: {
  'cesium': path.resolve(__dirname, cesiumSource)
}
//module下添加unknownContextCritical
module{
	unknownContextCritical: false
}

unknownContextRegExp: /^./.*$/ 有些博客中要在module中添加这一句，但是出现了问题、、

3、配置 webpack.dev.conf.js（build/）

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

plugins: [
    new CopyWebpackPlugin([{ 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' }]),
    new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
    new webpack.DefinePlugin({
      // Define relative base path in cesium for loading assets
      CESIUM_BASE_URL: JSON.stringify('/')
    }),
]

4、配置webpack.prod.conf.js文件（build/）

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

plugins: [
    new CopyWebpackPlugin([{ 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' }]),
    new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
    new webpack.DefinePlugin({
      // Define relative base path in cesium for loading assets
      //定义 Cesium 从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./',使用相对路径
      CESIUM_BASE_URL: JSON.stringify('./')
    }),
]

main.js

cesium在高版本中引入的方式和低版本有所不同

//高
import * as Cesium from 'cesium/Cesium'
import * as widgets from "cesium/Widgets/widgets.css";
//低
import Cesium from 'cesium/Cesium'
import widgets from "cesium/Widgets/widgets.css";
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

到这一步基本上就可以在vue项目中基本使用cesium，但是同一套代码感觉都是因人而异的。

另一种配置 （@1.70.0版本）

在vue.config.js中的配置方法

const cesiumSource = './node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
//module.exports 空开的对象中 添加
configureWebpack: {
        output: {
            sourcePrefix: ' '
        },
        amd: {
            toUrlUndefined: true
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                'cesium': path.resolve(__dirname, cesiumSource)
            }
        },
        plugins: [
            new CopyWebpackPlugin([{ 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' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify('./')
            })
        ],
        module: {
            unknownContextCritical: /^.\/.*$/,
            unknownContextCritical: false

        }
    },