Vue.js+Vuetify+Railsでherokuデプロイ後にスタイルが崩れるときの対処

6313 ワード
Heroku Rails Vue.js JavaScript Ruby Ruby テキストリンク

概要

  1. hello_vue.jsに書かれている内容をすべてapplication.jsに移す
  2. application.html.erbのstylesheet_link_tagをstylesheet_pack_tagに変更する

前提条件

以下のコマンドでアプリを新規作成。

% rails new xxx --webpack=vue

ディレクトリ構成

対処法

hello_vue.jsに書かれている内容をすべてapplication.jsに移す

デフォルトではhello_vue.jsにVueインスタンスを生成するコードが書かれている

javascript/packs/hello_vue.js
import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

これらを全てapplication.jsに移す。↓

javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 以下、hello_vue.jsから移してきたコード
import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

application.html.erbのstylesheet_link_tagをstylesheet_pack_tagに変更する

views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Webpackvue</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
-   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+   <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>