Edited at

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

Rails5〜から、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を使ってあげれば動作します。