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

最新推荐文章于 2025-10-11 16:20:21 发布

原创

最新推荐文章于 2025-10-11 16:20:21 发布 · 2.8k 阅读

10 ·

CC 4.0 BY-SA版权

本文详细介绍如何配置基于Vue.js的WebGIS开发环境，包括修改Webpack配置、添加必要的库、配置VueCLI初始化文件等内容。

前言

上一节已经搭建好了基于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',
                    maxIni