うまくいかなかったのでメモ
動作環境
mac 10.13.5
ruby 2.5.1 (rbenv)
rail 5.2.0
セットアップ
Rails アプリ作成
--webpack=vue
オプションを追加
rails new <アプリ名> -d postgresql -B --webpack=vue
CSPの設定
vue を使う場合は unsafe_eval を設定してね、というため開発環境用に追加。
cd <アプリ名>
vi config/initializers/content_security_policy.rb
---
Rails.application.config.content_security_policy do |policy|
if Rails.env.development?
policy.script_src :self, :https, :unsafe_eval
else
policy.script_src :self, :https
end
end
---
bundleしてサーバ起動してみる
bundle
bin/rails db:create
bin/rails s
welcomeが表示される
コントローラ作成
bin/rails g controller Home index
vi config/routes.rb
---
Rails.application.routes.draw do
root to: 'home#index'
end
---
vi app/views/home/index.html.slim
---
= javascript_pack_tag 'hello_vue'
---
webpackでビルドしてみる
bin/webpack-dev-server
---
ERROR in ./app/javascript/app.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
---
エラーがでる
vue-loader v15 から VueLoaderPlugin を読み込むようになったもよう。
VuewLoaderPluginを取り込むようにする
vi config/webpack/environment.js
---
const { environment } = require('@rails/webpacker')
const VueLoaderPlugin = require('vue-loader/lib/plugin') <- ★
const vue = require('./loaders/vue')
environment.loaders.append('vue', vue)
environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin()) <- ★
module.exports = environment
---
再度実行!
bin/webpack-dev-server
bin/rails s
おわり