Vue CLI 'webpack' template doesn't work out of the box

Version

2.4.0

Node and OS info

node 10.8.0 / yarn 1.7.0 / macOS 10.13.6

Steps to reproduce

mkdir testapp
cd testapp
vue init webpack
yarn install
yarn run dev

What is expected?

I expected the generated app to not throw errors and show a generic app placeholder.

What is actually happening?

The http://localhost:8080 browser viewport is blank and the console has an error:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in Root)

[atunjeafolabi]

Create a vue.config.js in the root of your project. Then copy the below code snippet into it

module.exports = {
    runtimeCompiler: true
  };

Don’t forget to re run npm run serve to effect it.

[nourspace]

By default, the generated webpack config has this

...
  resolve: {
    symlinks: false,
    alias: {
      '@': '/path/to/project/src',
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
...

So I had to update vue.config.js to use use the compiler-included build instead.

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
  }