Skip to content

Creating A Vue Configuration File

Andy Rothwell edited this page Jul 13, 2020 · 11 revisions

We already have and will continue in this wiki to refer to a MAPBOARD config file (main.js) that you create to configure a project that uses mapboard.

There is also a VUE config file, which you need to make the Vue UI create to make your app work in Internet Explorer 11.

In the Vue UI, click on "Configuration" on the left, and "Vue CLI Configure your Vue project" in the middle column:

If you just temporarily change any value, the buttons at the bottom will change so that you will have the opportunity to click on "Save changes" at the bottom:

Note - you can erase your changes 1 second after you make them, and you will still have the option of "Save changes" at the bottom, which is all we need. In the diagram above the example of a change was in the name of the Output directory, but you should not actually rename and save the change to the name of the Output directory.

By hitting save, even when you have no changes to save, the Vue CLI will create an empty "vue.config.js" file in your project:

Copy the following text and add it to your file within the "{}":

transpileDependencies: [
  '@phila/mapboard',
  '@phila/vue-comps',
  '@phila/vue-mapping',
  '@phila/vue-datafetch',
  'arcgis-to-geojson-utils',
]

Why do you have to do this?

The packages above all have modern es6 javascript in them. This kind of js does not work in old Internet Explorer versions, including IE 11.

You included the devDependency Babel when you created your project. Babel is a system that replaces all of your es6 code with older js when your project gets compiled, so that it will work with IE 11. But it is only set up originally to apply Babel to the things in your code, not in the dependencies your project uses, including mapboard, vue-comps, vue-mapping, and vue-datafetch.

By adding those lines to your vue.config.js, you tell it to also use Babel on those packages.

Clone this wiki locally