Vue.js+Vuetify+Rails에서 heroku 배포 후 스타일이 무너질 때 해결

개요

hello_vue.js에 쓰여진 모든 내용을 application.js로 옮긴다

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>

Reference

이 문제에 관하여(Vue.js+Vuetify+Rails에서 heroku 배포 후 스타일이 무너질 때 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/saitaman_zarathustra/items/828a8d02a7b3f6d7e751

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다