1.Vue-cli:2.9.6
2.element-ui:2.13.0
3.Cesium:1.64.0
请查考Vue-cli+ElementUI环境搭建
使用npm安装
npm install cesium --save
1.在文件开头添加Cesium的Source路径
const cesiumSource = '../node_modules/cesium/Source'
文件开头像这样:
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
//添加Cesium的Source路径
const cesiumSource = '../node_modules/cesium/Source'
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
......
2.在output 里加入sourcePrefix: ’ ’ 让webpack 正确处理多行字符串
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath,
//Needed to compile multiline string in cesium------
sourcePrefix: ' '
},
3.添加amd
amd: {
// Enable webpack-friendly use of require in cesium
toUrlUndefined: true
},
4.设置cesium的别名
在resolve中添加Cesium的别名:
'cesium': path.resolve(__dirname, cesiumSource)
resolve中的内容如下:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
//设置cesium的别名
'cesium': path.resolve(__dirname, cesiumSource)
}
},
5.添加rule规则
//过滤掉运行过程中cesium的错误信息
{
test: /\.js\.map$/,
use: [{
loader: 'file-loader'
}]
}
6.去掉webpack打印载入特定库时的警告
//不让webpa打印载入特定库时候的警告
unknownContextRegExp: /^.\/.*$/,
unknownContextCritical: false
1.在文件头部添加cesium源码与workers路径
//定义cesium源代码路径,前面没有.../
const cesiumSource = 'node_modules/cesium/Source'
//定义cesium workers路径
const cesiumWorkers = '../Build/Cesium/Workers'
2.在plugins new webpack.DefinePlugin中添加CESIUM_BASE_URL
new webpack.DefinePlugin({
'process.env': require('../config/dev.env'),
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
}),
3.在plugins中添加将Cesium Assets,Widgets和Workers拷贝到static目录下的配置
// 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'
}]),
最终plugins内容如下:
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env'),
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// 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'
}]),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
1.定义Cesium源代码和workers路径
//定义cesium源代码路径,前面没有.../
const cesiumSource = 'node_modules/cesium/Source'
//定义cesium workers路径
const cesiumWorkers = '../Build/Cesium/Workers'
2.定义CESIUM_BASE_URL
new webpack.DefinePlugin({
'process.env': env,
//--cesium--配置
CESIUM_BASE_URL: JSON.stringify('./')
}),
3.在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'
}]),
最终plugins内容如下:
plugins: [
// Copy Cesium Assets, Widgets, and Workers to a static directory
// 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'
}]),
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env,
//--cesium--配置
CESIUM_BASE_URL: JSON.stringify('./')
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
在HelloWorld.vue中添加代码
运行程序,可看到如下界面,说明配置成功。
扫描下方二维码,关注微信公众号,精彩内容同步更新,有问题可随时交流