Vue.js Setup
Hi,
I'm trying to get debugging setup for a Vue.js project in Webstorm. I setup vue based on the default install setup from the vue.js site using CLI.
# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev
All is well from the command line, but running debug from Webstorm is not.
The only info I could find was this page and it doesn't match the latest Webstorm.
Basically it looks like the "build" directory is only build scripts and not where the build ends up. And pointing Webstorm at the main.js in src isn't working either. Anybody can point me to any tutorials or guide to setup Webstorm properly?
Thanks,
Brett
Please sign in to leave a comment.
1. in build/webpack.dev.conf.js, line 19, change
devtool: '#cheap-module-eval-source-map'to
2. create a JavaScript Debug run configuration for http://localhost:8080/ URL
3. set webpack:///. URL mapping for the root folder
4. run npm run dev to start the app, once it's started, hit Debug for the configuration above
5. once page is loaded in browser, refresh it to get breakpoints hit
Thank you very much! I got it working now. Showing the screenshots along with the description helped a lot. Cheers!
Hi.
I am using IntelliJ 172.3968.16 on GNU/Linux, with chrome 60.0.3112.101 (64 bits).
I initialized my project with vue init vuetifyjs/webpack (a slightly modified template for vuetifyjs).
I applied your instructions (slight change being that I only have a webpack.config.js file at the root of the project). I can now set breakpoints in JS files, but setting a breakpoint anywhere in App.vue does not work.
Do you have a clue ?
ok, so I created a "raw" vue webpack project with
vue init webpack
then applied your procedure and, as one can guess, it works.
I am curious to learn why it does not work with vuetifyjs/webpack template, but as the development server is entirely different
* for vuetifyjs/webpack template : "cross-env NODE_ENV=development webpack-dev-server --open --hot
* for "raw" webpack template: "node build/dev-server.js"
I guess it will be simplier to "vuetify" the standard template.
as far as I can see, the bundle generated for vuetify app is different - it includes multiple App.vue chunks, like
you can open http://localhost:8080/dist/build.js.map in browser to see what the generated map looks like.
All these chunks except for
include some css, etc. generated stuff and have little to do with the original .vue code
So, to get breakpoints in App.vue hit, you need setting URL mappings webpack:/// for src folder:
All other steps are the same as before
It works great, thank you.