Rails
vue.js
webpack
Rails5
webpacker

[Rails5.1][Webpacker][Vue.js] 動かそうとするとコンポネントエラーになる問題

Rails上でWebpackerが使いやすくなったのですが、
Vue.jsを載せて動かそうとするととあるエラーにぶつかることがあります。

[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.

この問題の解決法は、以下の記事で紹介されています。
http://qiita.com/magaya0403/items/3fbe9aa20c6a66b76662

紹介されている通りWebpackのconfigファイルに「aliasを追加すれば」解決できるのですが、
自分のProjectにはconfig/webpack/shared.jsが見当たらず。。。

今回は他のconfigファイルにaliasを追加し、
このエラーを回避する方法を見つけたので紹介させていただきます。

config/webpack/production.js
const environment = require('./environment')

module.exports = Object.assign({}, environment.toWebpackConfig(), {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})
config/webpack/development.js
const environment = require('./environment')

module.exports = Object.assign({}, environment.toWebpackConfig(), {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})
config/webpack/test.js
const environment = require('./environment')

module.exports = Object.assign({}, environment.toWebpackConfig(), {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})

それぞれの環境のconfigファイルにObject.assignを使ってあげれば動作します。

フロントエンド奥が深い。。。