一步步建立 Vue + Cesium 初始化项目

一步步建立 Vue + Cesium 初始化项目

初始化 Vue 项目

升级 npm

npm install -g npm

安装 @vue/cli 和 @vue/cli-service-global

npm install -g @vue/cli
npm install -g @vue/cli-service-global

创建项目

vue create project-name

安装 Cesium

cnpm install --save-dev cesium

配置 webpack

使用 Vue CLI 3 创建的项目，需要在目录下新建 vue.config.js 文件对 webpack 进行配置，帮助文件参见 vue.config.js。

安装 webpack 插件

copy-webpack-plugin

用于拷贝项目文件至 build 文件

npm install --save-dev copy-webpack-plugin

strip-pragma-loader（生产环境）

用于在生产环境中移除 errors 和 warnings

npm install --save-dev strip-pragma-loader

vue.config.js 示例

Cesium 的 webpack 配置参见 cesium-webpack-example

const path = require('path');

const webpack = require('webpack');

const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const cesiumThirdParty = '../Build/Cesium/ThirdParty';

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  configureWebpack: {
    context: __dirname,
    // 为 cesium 模块创建别名，更方便进行 import 和 require
    resolve: {
      alias: {
        cesium: path.resolve(__dirname, cesiumSource)
      }
    },
    amd: {
      // Enable webpack-friendly use of require in Cesium
      // Tells Cesium that the version of AMD webpack uses to evaluate require statements is not compliant with the standard toUrl function
      toUrlUndefined: true
    },
    plugins: [
      new CopyWebpackPlugin([
        {from: path.join(cesiumSource, cesiumWorkers), to: 'Cesium/Workers'},
        {from: path.join(cesiumSource, cesiumThirdParty), to: 'Cesium/ThirdParty'},
        {from: path.join(cesiumSource, 'Assets'), to: 'Cesium/Assets'},
        {from: path.join(cesiumSource, 'Widgets'), to: 'Cesium/Widgets'}
      ]),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('Cesium')
      })
    ]
  }
}