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