WebGIS实战：Web GIS开发环境配置(Vue2.*+IView+Openlayers+Ol-ext+Proj4+JQuery+Axios)

相关Web GIS实战信息：
上一篇博客：WebGIS实战：前端开发环境搭建(nvm、node、vue cli)
下一篇博客：WebGIS实战：Openlayers实现网络地图的加载与切换

前言

上一节已经搭建好了基于Vue.js的前端开发环境，但是对于里面的配置我们还没完善，所以，这一节主要对开发环境进行具体配置，以满足Web GIS开发。

博主选择的配置是：Vue2.*+IView+Openlayers+Ol-ext+Proj4+JQuery+Axios

• Vue2.*：虽然现在Vue已经更新到3.0了，但流行使用的仍是Vue2，所以博主采用Vue2全家桶；
• IView：IView是基于Vue框架的UI库，里面几乎能满足我们前端的UI需求，如按钮、菜单栏、图标等等；
• Openlayers：Openlayers是一个高性能、功能丰富的地图库，用于在 Web 上创建交互式地图，如地图加载、显示与关闭、查询交互等。目前已经更新到Openlayers6.4.3版本；
• Ol-ext：Ol-ext是对于Openlayers库的一个扩展库，在Openlayers的基础上实现了许多的UI交互操作，如图层控制切换等。目前已经更新到Ol-ext3.1.7；
• proj4：proj4是开源GIS最著名的地图投影库，在前端交互中加载的地图不可能都是同一个坐标系的，因此也需要通过坐标系转换或投影转换后再进行加载；
• JQuery：JQuery是JavaScript最重要的一个库之一，虽然Vue能够实现DOM操作，但是有些场景仍需要JQuery来辅助；
• Axios：Axios是一个基于 promise 的 HTTP 库，能够向后台发送请求。相比其他HTTP库，其操作更简洁与方便。

对于其他需要的库，可能会在后面更新增加。当前的配置基本满足了Web GIS的开发需求。另外，以下的配置文件都是可以复制粘贴到你的项目中的

在添加这些配置前，先修改修改有Vue CLI提供的基础配置吧！

1、修改Webpack配置

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack尤其适用于单页面富应用(Single Page Applicaiton)场景，由Vue CLI3.0及以上创建的项目里面都默认集成了webpack及相关配置，但我们仍可能需要对webpack配置进行修改，Vue也很贴心地留出了一个修改接口——在package.json的等级上创建一个vue.config.js文件用于自定义。

步骤1：引入uglifyjs-webpack-plugin插件，该插件能对js等文件进行压缩处理。在terminal终端中输入npm install --save-dev uglifyjs-webpack-plugin，安装插件的相关文件库；
步骤2：创建vue.config.js文件，通用的模板如下，每个字段都备有相关注释，按需求进行修改；

const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    publicPath: './', // 基本路径
    outputDir: 'dist', // 输出文件目录
    lintOnSave: false, // eslint-loader 是否在保存的时候检查
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: config => {
        config.resolve.symlinks(true);//热更新
    },
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            // 将每个依赖包打包成单独的js文件
            let optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name (module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`
                            }
                        }
                    }
                },
                minimizer: [new UglifyPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_console: true, // console
                            drop_debugger: false,
                            pure_funcs: ['console.log'] // 移除console
                        }
                    }
                })]
            }
            Object.assign(config, {
                optimization
            })
        } else {
            // 为开发环境修改配置...
            config.mode = 'development'
        }
        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components'),
                    '@v': path.resolve(__dirname, './src/views')
                } // 别名配置
            }
        })
    },
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0', // 允许外部ip访问
        port: 8022, // 端口
        https: false, // 启用https
        overlay: {
            warnings: true,
            errors: true
        }, // 错误、警告在页面弹出
        proxy: {
            '/api': {
                target: 'http://www.baidu.com/api',
                changeOrigin: true, // 允许websockets跨域
                // ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        } // 代理转发配置，用于调试环境
    },
    // 第三方插件配置
    pluginOptions: {}
}

2、添加库管理配置

步骤1：将上述的相关库通过package.json添加

{
  "name": "webgis",
  "version": "0.1.0",
  "author": "Oruizn",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "vue-select": "^3.10.8",
    "axios": "^0.21.0",
    "vue-axios": "^3.2.0",
    "vue-lazy-render": "^1.0.20",
    "jquery": "^3.2.1",
    "ol": "^6.4.3",
    "ol-ext": "^3.1.17",
    "ol-contextmenu": "^4.1.0",
    "proj4": "^2.6.3",
    "view-design": "^4.4.0",
    "izitoast": "^1.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11",
    "uglifyjs-webpack-plugin": "^2.2.0"
  }
}

步骤2：在terminal终端中输入npm install，将上述的相关库通过npm导入本地；

3、修改Vue CLI初始化的文件

• 删除掉view文件夹中的Home.vue、About.vue，component文件夹中的HelloWorld.vue；
• 删除App.vue文件中对于Home、About的引用；
  
• 删除router文件夹下Index.js中对于Home和About的索引；
  

4、下一步计划

至此，关于Web GIS开发环境配置及初始化就完成了。

接下来，就需要使用这些库来创建相关的地图应用，下一节的的内容是：如何通过Openlayers实现网络地图的加载与切换。

请关注博主，以获得最新的Web GIS实战信息！谢谢大家。

上一篇博客：WebGIS实战：前端开发环境搭建(nvm、node、vue cli)
下一篇博客：WebGIS实战：Openlayers实现网络地图的加载与切换