区块链技术博客
www.b2bchain.cn

cesium 开发环境搭建( vue )求职学习资料

本文介绍了cesium 开发环境搭建( vue )求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

这篇是 cesium 开发环境搭建( react ) 的姊妹篇,原理基本一样,主要就是 webpack 的配置。

一、安装 vue-cli

npm install -g @vue/cli

二、创建工程

vue create vue-cesium

三、安装 cesium

npm install cesium --save

四、安装 copy-webpack-plugin

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

五、webpack 配置

在项目根目录下(与 package.json 同)新建 vue.config.js,配置如下

const path = require('path') const webpack = require('webpack') const CopyWebpackPlugin = require('copy-webpack-plugin')  module.exports = {   // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致   publicPath: './',   // 输出文件目录   outputDir: 'dist',   // eslint-loader 是否在保存的时候检查   lintOnSave: true,   // 是否使用包含运行时编译器的 Vue 构建版本   runtimeCompiler: false,   // 生产环境是否生成 sourceMap 文件   productionSourceMap: false,   // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)   integrity: false,   // webpack相关配置   chainWebpack: config => {     config.resolve.alias       .set('vue$', 'vue/dist/vue.esm.js')       .set('@', path.resolve(__dirname, './src'))   },   configureWebpack: {     amd: {       // Enable webpack-friendly use of require in Cesium       toUrlUndefined: true     },     plugins: [       // Copy Cesium Assets, Widgets, and Workers to a static directory       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'ThirdParty'), to: 'ThirdParty' } ]),       new webpack.DefinePlugin({         // Define relative base path in cesium for loading assets         CESIUM_BASE_URL: JSON.stringify('')       })     ],     module: {       unknownContextCritical: false     }   },   // css相关配置   css: {},   // 是否使用 thread-loader   parallel: require('os').cpus().length > 1,   // PWA 插件相关配置   pwa: {},   // webpack-dev-server 相关配置   devServer: {},   // 第三方插件配置   pluginOptions: {} }

这篇是 cesium 开发环境搭建( react ) 的姊妹篇,原理基本一样,主要就是 webpack 的配置。

一、安装 vue-cli

npm install -g @vue/cli

二、创建工程

vue create vue-cesium

三、安装 cesium

npm install cesium --save

四、安装 copy-webpack-plugin

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

五、webpack 配置

在项目根目录下(与 package.json 同)新建 vue.config.js,配置如下

const path = require('path') const webpack = require('webpack') const CopyWebpackPlugin = require('copy-webpack-plugin')  module.exports = {   // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致   publicPath: './',   // 输出文件目录   outputDir: 'dist',   // eslint-loader 是否在保存的时候检查   lintOnSave: true,   // 是否使用包含运行时编译器的 Vue 构建版本   runtimeCompiler: false,   // 生产环境是否生成 sourceMap 文件   productionSourceMap: false,   // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)   integrity: false,   // webpack相关配置   chainWebpack: config => {     config.resolve.alias       .set('vue$', 'vue/dist/vue.esm.js')       .set('@', path.resolve(__dirname, './src'))   },   configureWebpack: {     amd: {       // Enable webpack-friendly use of require in Cesium       toUrlUndefined: true     },     plugins: [       // Copy Cesium Assets, Widgets, and Workers to a static directory       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'ThirdParty'), to: 'ThirdParty' } ]),       new webpack.DefinePlugin({         // Define relative base path in cesium for loading assets         CESIUM_BASE_URL: JSON.stringify('')       })     ],     module: {       unknownContextCritical: false     }   },   // css相关配置   css: {},   // 是否使用 thread-loader   parallel: require('os').cpus().length > 1,   // PWA 插件相关配置   pwa: {},   // webpack-dev-server 相关配置   devServer: {},   // 第三方插件配置   pluginOptions: {} }

这篇是 cesium 开发环境搭建( react ) 的姊妹篇,原理基本一样,主要就是 webpack 的配置。

一、安装 vue-cli

npm install -g @vue/cli

二、创建工程

vue create vue-cesium

三、安装 cesium

npm install cesium --save

四、安装 copy-webpack-plugin

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

五、webpack 配置

在项目根目录下(与 package.json 同)新建 vue.config.js,配置如下

const path = require('path') const webpack = require('webpack') const CopyWebpackPlugin = require('copy-webpack-plugin')  module.exports = {   // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致   publicPath: './',   // 输出文件目录   outputDir: 'dist',   // eslint-loader 是否在保存的时候检查   lintOnSave: true,   // 是否使用包含运行时编译器的 Vue 构建版本   runtimeCompiler: false,   // 生产环境是否生成 sourceMap 文件   productionSourceMap: false,   // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)   integrity: false,   // webpack相关配置   chainWebpack: config => {     config.resolve.alias       .set('vue$', 'vue/dist/vue.esm.js')       .set('@', path.resolve(__dirname, './src'))   },   configureWebpack: {     amd: {       // Enable webpack-friendly use of require in Cesium       toUrlUndefined: true     },     plugins: [       // Copy Cesium Assets, Widgets, and Workers to a static directory       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),       new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'ThirdParty'), to: 'ThirdParty' } ]),       new webpack.DefinePlugin({         // Define relative base path in cesium for loading assets         CESIUM_BASE_URL: JSON.stringify('')       })     ],     module: {       unknownContextCritical: false     }   },   // css相关配置   css: {},   // 是否使用 thread-loader   parallel: require('os').cpus().length > 1,   // PWA 插件相关配置   pwa: {},   // webpack-dev-server 相关配置   devServer: {},   // 第三方插件配置   pluginOptions: {} }

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » cesium 开发环境搭建( vue )求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们