vue中引入1.60版本cesium

1.安装cesium

npm install --save  [email protected]

2.cesium环境配置

2.1配置 webpack.base.conf.js

• 在文件开头定义路径

const cesiumSource = '../node_modules/cesium/Source'

• 在output添加 sourcePrefix: ’ ’

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
      sourcePrefix: ' '
  }

• 设置cesium别名，
  需要在resolve中设置cesium别名，这样在引入的时候就可以根据别名找到Cesium的包。
  （注：也可以不设置别名，导包是直接导入’cesium/Source/Cesium.js’就行。其实设置别名的目的就是让“别名”指向/node_modules/cesium/Source目录）

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      cesium: path.resolve(__dirname, cesiumSource)
    }
  }

• 阻止依赖警告
  module里添加unknownContextCritical:false

 module: {
    rules: [
     ...
    ],
    unknownContextCritical: false,
    unknownContextRegExp: /^.\/.*$/,
  },

2.2 配置 webpack.dev.conf.js

• 定义路径

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

2.3 配置webpack.prod.conf.js文件

– 定义路径

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

3.使用

• 运行结果
  

参考文章

• https://segmentfault.com/a/1190000022714154