cesium+vue 项目初始搭建

vue+cesium 项目搭建

​ Cesium 1.63 版本之前是用的AMD的方式进行编译的，而在1.63版时使用ES6进行了重构，因此网上很多vue配置cesium的项目搭建方法是失败的。通过总结，vue项目初始化之后，根据项目版本，如下修改webpack配置：

配置文件

1. package.json 内的 cesium和vue版本。webpack和cesium的版本不一样，有可能以下项目配置会失败，此处提供参考，请勿修改你的package配置。

     "dependencies": {
       "cesium": "^1.69.0",
       "vue": "^2.5.2",
       "vue-router": "^3.0.1"
     },
     "devDependencies": {
       "autoprefixer": "^7.1.2",
       "babel-core": "^6.22.1",
       "babel-eslint": "^8.2.1",
       "babel-helper-vue-jsx-merge-props": "^2.0.3",
       "babel-jest": "^21.0.2",
       "babel-loader": "^7.1.1",
       "babel-plugin-dynamic-import-node": "^1.2.0",
       "babel-plugin-syntax-jsx": "^6.18.0",
       "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
       "babel-plugin-transform-runtime": "^6.22.0",
       "babel-plugin-transform-vue-jsx": "^3.5.0",
       "babel-preset-env": "^1.3.2",
       "babel-preset-stage-2": "^6.22.0",
       "chalk": "^2.0.1",
       "copy-webpack-plugin": "^4.0.1",
       "css-loader": "^0.28.0",
       "eslint": "^4.15.0",
       "eslint-config-standard": "^10.2.1",
       "eslint-friendly-formatter": "^3.0.0",
       "eslint-loader": "^1.7.1",
       "eslint-plugin-import": "^2.7.0",
       "eslint-plugin-node": "^5.2.0",
       "eslint-plugin-promise": "^3.4.0",
       "eslint-plugin-standard": "^3.0.1",
       "eslint-plugin-vue": "^4.0.0",
       "extract-text-webpack-plugin": "^3.0.0",
       "file-loader": "^1.1.4",
       "friendly-errors-webpack-plugin": "^1.6.1",
       "html-webpack-plugin": "^2.30.1",
       "jest": "^22.0.4",
       "jest-serializer-vue": "^0.3.0",
       "node-notifier": "^5.1.2",
       "optimize-css-assets-webpack-plugin": "^3.2.0",
       "ora": "^1.2.0",
       "portfinder": "^1.0.13",
       "postcss-import": "^11.0.0",
       "postcss-loader": "^2.0.8",
       "postcss-url": "^7.2.1",
       "rimraf": "^2.6.0",
       "semver": "^5.3.0",
       "shelljs": "^0.7.6",
       "uglifyjs-webpack-plugin": "^1.1.1",
       "url-loader": "^0.5.8",
       "vue-jest": "^1.0.2",
       "vue-loader": "^13.3.0",
       "vue-style-loader": "^3.0.1",
       "vue-template-compiler": "^2.5.2",
       "webpack": "^3.6.0",
       "webpack-bundle-analyzer": "^2.9.0",
       "webpack-dev-server": "^2.9.1",
       "webpack-merge": "^4.1.0"
     },
     "engines": {
       "node": ">= 6.0.0",
       "npm": ">= 3.0.0"
     },
     "browserslist": [
       "> 1%",
       "last 2 versions",
       "not ie <= 8"
     ]
   

2. webpack.base.conf.js配置

   'use strict'
   const path = require('path')
   const utils = require('./utils')
   const config = require('../config')
   const vueLoaderConfig = require('./vue-loader.conf')
   const cesiumSource = '../node_modules/cesium/Source';
   function resolve (dir) {
     return path.join(__dirname, '..', dir)
   }
   
   const createLintingRule = () => ({
     test: /\.(js|vue)$/,
     loader: 'eslint-loader',
     enforce: 'pre',
     include: [resolve('src'), resolve('test')],
     options: {
       formatter: require('eslint-friendly-formatter'),
       emitWarning: !config.dev.showEslintErrorsInOverlay
     }
   })
   
   module.exports = {
     context: path.resolve(__dirname, '../'),
     entry: {
       app: './src/main.js'
     },
     output: {
       path: config.build.assetsRoot,
       filename: '[name].js',
       publicPath: process.env.NODE_ENV === 'production'
         ? config.build.assetsPublicPath
         : config.dev.assetsPublicPath,
       sourcePrefix: ' '
     },
     resolve: {
       extensions: ['.js', '.vue', '.json'],
       alias: {
         'vue$': 'vue/dist/vue.esm.js',
         '@': resolve('src'),
         'cesium': path.resolve(__dirname, cesiumSource)
       }
     },
     module: {
       rules: [
         ...(config.dev.useEslint ? [createLintingRule()] : []),
         {
           test: /\.vue$/,
           loader: 'vue-loader',
           options: vueLoaderConfig
         },
         {
           test: /\.js$/,
           loader: 'babel-loader',
           include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
         },
         {
           test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
           loader: 'url-loader',
           options: {
             limit: 10000,
             name: utils.assetsPath('img/[name].[hash:7].[ext]')
           }
         },
         {
           test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
           loader: 'url-loader',
           options: {
             limit: 10000,
             name: utils.assetsPath('media/[name].[hash:7].[ext]')
           }
         },
         {
           test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
           loader: 'url-loader',
           options: {
             limit: 10000,
             name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
           }
         }
       ],
       unknownContextCritical: false
     },
     node: {
       // prevent webpack from injecting useless setImmediate polyfill because Vue
       // source contains it (although only uses it if it's native).
       setImmediate: false,
       // prevent webpack from injecting mocks to Node native modules
       // that does not make sense for the client
       dgram: 'empty',
       fs: 'empty',
       net: 'empty',
       tls: 'empty',
       child_process: 'empty'
     }
   }
   

3. webpack.dev.conf.js 配置如下

   'use strict'
   const utils = require('./utils')
   const webpack = require('webpack')
   const config = require('../config')
   const merge = require('webpack-merge')
   const path = require('path')
   const baseWebpackConfig = require('./webpack.base.conf')
   const CopyWebpackPlugin = require('copy-webpack-plugin')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
   const portfinder = require('portfinder')
   const cesiumSource = 'node_modules/cesium/Source'
   const cesiumWorkers = '../Build/Cesium/Workers'
   
   const HOST = process.env.HOST
   const PORT = process.env.PORT && Number(process.env.PORT)
   
   const devWebpackConfig = merge(baseWebpackConfig, {
     module: {
       rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
     },
     // cheap-module-eval-source-map is faster for development
     devtool: config.dev.devtool,
   
     // these devServer options should be customized in /config/index.js
     devServer: {
       clientLogLevel: 'warning',
       historyApiFallback: {
         rewrites: [
           { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
         ],
       },
       hot: true,
       contentBase: false, // since we use CopyWebpackPlugin.
       compress: true,
       host: HOST || config.dev.host,
       port: PORT || config.dev.port,
       open: config.dev.autoOpenBrowser,
       overlay: config.dev.errorOverlay
         ? { warnings: false, errors: true }
         : false,
       publicPath: config.dev.assetsPublicPath,
       proxy: config.dev.proxyTable,
       quiet: true, // necessary for FriendlyErrorsPlugin
       watchOptions: {
         poll: config.dev.poll,
       }
     },
     plugins: [
       new webpack.DefinePlugin({
         'process.env': require('../config/dev.env'),
         '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
       }),
       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 CopyWebpackPlugin([ { from: path.join('./static', 'model'), to: 'model3D'}])
       new CopyWebpackPlugin([
         {
           from: path.resolve(__dirname, '../static'),
           to: config.dev.assetsSubDirectory,
           ignore: ['.*']
         }
       ])
     ]
   })
   
   module.exports = new Promise((resolve, reject) => {
     portfinder.basePort = process.env.PORT || config.dev.port
     portfinder.getPort((err, port) => {
       if (err) {
         reject(err)
       } else {
         // publish the new Port, necessary for e2e tests
         process.env.PORT = port
         // add port to devServer config
         devWebpackConfig.devServer.port = port
   
         // Add FriendlyErrorsPlugin
         devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
           compilationSuccessInfo: {
             messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
           },
           onErrors: config.dev.notifyOnErrors
           ? utils.createNotifierCallback()
           : undefined
         }))
   
         resolve(devWebpackConfig)
       }
     })
   })
   

4. vue组件

   <template>
     <div id="app">
       <div id="cesiumContainer"></div>
     </div>
   </template>
   
   <script>
   import * as Cesium from 'cesium/Cesium'
   import 'cesium/Widgets/widgets.css'
   export default {
     mounted: function () {
       this.$nextTick(function () {
         let viewer = new Cesium.Viewer('cesiumContainer', {})
         viewer.camera.setView({
           orientation: {
             heading: Cesium.Math.toRadians(0),
             pitch: Cesium.Math.toRadians(-90),
             roll: Cesium.Math.toRadians(0)
           }
         })
       })
     }
   }
   </script>
   <style>
     html,
     body {
       width: 100%;
       height: 100%;
       padding: 0;
       margin: 0;
     }
     #app,#cesiumContainer {
       font-family: "Avenir", Helvetica, Arial, sans-serif;
       width: 100%;
       height: 100%;
       overflow: hidden;
     }
   </style>
   

5. 配置完成后 npm run dev 运行

参考文章

https://blog.csdn.net/asd358924810/article/details/106259565/