49
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-09-11

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

49
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
49
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?