vue/cli & cesium1.74

1. 说明

先说结论：通过 npm 引入 cesium 和在 public 中引入，二者其实效果差不多

• public 中放置的是官方压缩后的 build 文件，然后在 index.html 中引入即可全局使用 cesium，优点是使用方便快捷
• npm 引入的其实是 source 文件夹下的内容，在打包时通过 webpack 将资源配置到 dist 目录下，同时把 cesium.js 这个文件打包到了 chunk-vendor.js里

注：针对于 cesium1.74 版本有效，升级至 1.76 后会报错

• vue：^2.6.11
• cesium：^1.74.0

2. 配置

main.js里配置如下

import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';
window.Cesium = Cesium;

vue.config.js里配置如下

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // Webpack包文件可视化分析
// const CompressionWebpackPlugin = require('compression-webpack-plugin'); // gzip压缩
// const productionGzipExtensions = ['js', 'css'];

const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
let cesiumSource = './node_modules/cesium/Source';
let cesiumWorkers = '../Build/Cesium/Workers';

module.exports = {
	publicPath: './',
	outputDir: 'D:\\Common',
	lintOnSave: true,
	productionSourceMap: false,
	devServer: {
		open: true, //启动服务后自动打开浏览器
		host: 'localhost',
		port: 8371,
		// https: false,
		// hotOnly: false,
		overlay: {
			errors: true,
			warnings: false,
		},
	},

	configureWebpack: {
		output: {
			sourcePrefix: ' ', //让webpack正确处理多行字符串
		},
		amd: {
			toUrlUndefined: true,
		},
		resolve: {
			alias: {
				cesium: path.resolve(__dirname, cesiumSource),
				// '@': path.resolve(__dirname, './src'),
				// '@i': path.resolve(__dirname, './src/assets'),
			},
		},
		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
				CESIUM_BASE_URL: JSON.stringify('./'),
			}),
			/* new BundleAnalyzerPlugin(),
			new CompressionWebpackPlugin({
				filename: '[path].gz[query]',
				algorithm: 'gzip',
				test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
				threshold: 10240,
				minRatio: 0.8,
			}), */
		],
		module: {
			unknownContextCritical: /^.\/.*$/,
			unknownContextCritical: false,
		},
	},
};

//-----------------------------------------结束分割线---------------------------------------------
/* configureWebpack: (config) => {

		//生产&测试环境
		let pluginsPro = [
			//Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
			new BundleAnalyzerPlugin(),
			//文件开启Gzip，也可以通过服务端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
			new CompressionPlugin({
				filename: '[path].gz[query]',
				algorithm: 'gzip',
				test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
				threshold: 8192,
				minRatio: 0.8,
			}),
		];

		//开发环境
		let pluginsDev = [
			//移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin  https://github.com/Tencent/vConsole)
			new vConsolePlugin({
				filter: [], // 需要过滤的入口文件
				enable: true, // 发布代码前记得改回 false
			}),
		];

		if (process.env.NODE_ENV === 'production') {
			// 为生产环境修改配置...process.env.NODE_ENV !== 'development'
			config.plugins = [...config.plugins, ...pluginsPro];
		} else {
			// 为开发环境修改配置...
			config.plugins = [...config.plugins, ...pluginsPro];
		}
	}, 
	*/

/* 	gzip服务端配置
	<Connector port="8081" protocol="org.apache.coyote.http11.Http11AprProtocol"
	connectionTimeout="20000"
	redirectPort="8444"
	URIEncoding="UTF-8"

	useSendfile="false"
	compression="on"   // 打开压缩功能 (on|off)
	compressionMinSize="2048"   // 启用压缩的输出内容大小，这里面默认为2KB
	compressableMimeType="text/css,text/javascript,text/plain,application/javascript,application/json"/> */