npm install cesium --save
①定義cesium源碼路徑css
const cesiumSource = '../node_modules/cesium/Source'
②在module.exports中,output添加sourcePrefix:' ',讓webpack正確處理多行字符串vue
output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, sourcePrefix: ' ' },
③在output後面,添加amd模式支持node
output: {...}, amd: { toUrlUndefined: true},
④在resolve中設置cesium別名,引入的時候直接根據別名就能夠找到cesium包了webpack
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'cesium': path.resolve(__dirname, cesiumSource) } },
⑤module裏添加unknownContextCritical:false,讓webpack打印載入特定庫時候告警web
module: { rules: [...], unknownContextCritical: false, // unknownContextRegExp: /^.\/.*$/, //這個不少都推薦了,可是實測的時候發現會報錯,先不用},
①配置路徑npm
const cesiumSource = 'node_modules/cesium/Source'const cesiumWorkers = '../Build/Cesium/Workers'
②在plugins下面添加以下插件json
plugins: [ ..., // Copy Cesium Assets, Widgets, and Workers to a static directory 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('') }) ]
①配置路徑ide
const cesiumSource = 'node_modules/cesium/Source'const cesiumWorkers = '../Build/Cesium/Workers'
②在plugins下面添加以下插件,拷貝靜態資源。與dev配置略有不一樣ui
plugins: [ ..., // Copy Cesium Assets, Widgets, and Workers to a static directory 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從哪裏加載資源,若是使用默認的'',卻變成了絕對路徑了,因此這裏使用'./',使用相對路徑 CESIUM_BASE_URL: JSON.stringify('./') }) ]
assetsSubDirectory: 'static', assetsPublicPath: '',
在main.js中this
import * as Cesium from 'cesium/Cesium'import * as widgets from 'cesium/Widgets/widgets.css'Vue.prototype.Cesium = Cesium Vue.prototype.widgets = widgets
在vue中使用時
let Cesium = this.Cesium let viewer = new Cesium.Viewer(this.$refs.cesiumViewer, { baseLayerPicker: false, fullscreenButton: false, geocoder: false, homeButton: false, animation: false, infoBox: false, sceneModePicker: false, selectionIndicator: false, // creditContainer: "creditBar", skyBox: false, skyAtmosphere: false, timeline: false, navigationHelpButton: false, scene3DOnly: true, allowDataSourcesToSuspendAnimation: false })
import * as Cesium from 'cesium/Cesium' import * as widgets from 'cesium/Widgets/widgets.css' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted () { let viewer = new Cesium.Viewer(this.$refs.cesiumViewer, { baseLayerPicker: false, fullscreenButton: false, geocoder: false, homeButton: false, animation: false, infoBox: false, sceneModePicker: false, selectionIndicator: false, // creditContainer: "creditBar", skyBox: false, skyAtmosphere: false, timeline: false, navigationHelpButton: false, scene3DOnly: true, allowDataSourcesToSuspendAnimation: false }) window.viewer = viewer } }