Vue+Cesium项目环境搭建

①基础环境安装

1. node.js(检测npm包管理工具  npm -v)
2. Webpack安装(全局安装  npm install webpack -g)(检测安装成功: webpack -v)
3. vue-cli脚手架构建工具（npm install vue-cli -g）（检测：vue -V）

②vue项目搭建

1. 命令行cd进入项目构建文件目录级，执行vue init webpack project_name(项目名不可用中文)，按提示输入相应内容，项目文件构建完成。
2. cd到项目目录内，安装项目依赖npm install，项目启动npm run dev
3. 浏览器进入地址http://localhost:8080，打开项目页面，搭建完成。

③cesium环境配置

1. 命令行在项目目录下，安装cesium组件库  npm install cesium --save

2. 在build/webpack.base.conf.js下，

       定义cesium源码路径

const cesiumSource = '../node_modules/cesium/Source'
var webpack = require('webpack')

       在module.exports中output添加sourcePrefix: ' '，让webpack正确处理多行字符串

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
        ? config.build.assetsPublicPath 
        : config.dev.assetsPublicPath,
    sourcePrefix: ' '
},

      在resolve中设置cesium别名

resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'cesium': path.resolve(__dirname, cesiumSource)
   }
},

        module里添加

module: {
   rules: [...],
   unknownContextCritical: false,
},

 

3. 配置 webpack.dev.conf.js 文件

      配置路径

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

在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 assets
   CESIUM_BASE_URL: JSON.stringify('')
})

 

4. 配置webpack.prod.conf.js文件

     配置路径

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

     在plugins添加如下插件，与dev配置略有不同

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 从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./',使用相对路径
     CESIUM_BASE_URL: JSON.stringify('./')
})

 

5. 修改config里index.js中build中的assetsPublicPath为"./"

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: "./",

 

6. 配置main.js 

import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'

Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

 

7. div引入，使用cesium。修改components下的HelloWorld.vue组件

8. 执行npm run dev , 打开浏览器运行项目（localhost:8010）（默认端口号为8080，到config/index.js里可修改）