arcgis vue 点位无法显示_ArcGIS CLI 构建Vue项目符号字体不显示的问题

ArcGIS API for JavaScript 4.15已经可以支持与react和vue等前端主流框架融合了，官方提供了两种方式，webpack-plugin或者esri-loader。

esri-loader使用的方式比较奇怪，想要使用 webpack-plugin的方式以import的方式引入arcgis js api。

同时arcgis还基于webpack-plugin提供了脚手架ArcGIS CLI

arcgis cli 脚手架的使用

使用方法如下

（1）首先全局安装ArcGIS CLI

npm install -g @arcgis/cli

（2）创建自己的工程

React工程

arcgis create my-react-application -t react

VUE工程

arcgis create my-vue-application -t vue

（3）创建完成后

npm start

即可启动该项目

VUE符号字体不显示

当我喜滋滋的完成以上步骤时发现，VUE创建的项目的放大缩小的图标无法显示

VUE项目的图标无法显示

分析问题

分析一下应该是字体文件没有被加载，字体文件是woff或者woff2，于是网上一通搜索，通过修改路径都无法解决

后台通过查看build之后的页面代码发现，字体文件的引用路径在打包时都被替换成[object Module],于是恍然大悟

url被替换成[object Module]

字体文件存储在./build文件夹下，显然VUE在打包静态资源的地址时出了问题。

一通百度，果然发现问题

这是因为file-loader默认采用ES模块语法，然而Vue生成的是CommonJS模块语法，二者不一致。要么让file-loader或url-loader采用CommonJS语法，要么让Vue采用ES语法。

解决问题

刚好file-loader或url-loader有一个esModule选项能调整，将其设置为false即可：

在webpack.config.js文件中,找到以下内容，在options中增加 esModule: false

.......
                {
                    test: /.(jpe?g|png|gif|svg|webp)$/,
                    loader: 'url-loader',
                    options: {
                        // Inline files smaller than 10 kB (10240 bytes)
                        limit: 10 * 1024
                    }
                },
                {
                    test: /.(wsv|ttf|otf|eot|woff(2)?)(?[a-z0-9]+)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'build/[name].[ext]'
                            }
                        }
                    ]
                },
......

修改后的代码如下

.......
                {
                    test: /.(jpe?g|png|gif|svg|webp)$/,
                    loader: 'url-loader',
                    options: {
                        // Inline files smaller than 10 kB (10240 bytes)
                        limit: 10 * 1024,
                        esModule: false
                    }
                },
                {
                    test: /.(wsv|ttf|otf|eot|woff(2)?)(?[a-z0-9]+)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'build/[name].[ext]',
                                esModule: false
                            }
                        }
                    ]
                },
......

看一下结果

Nice 完美解决