[환경 구축] Rails6+Vue.js에서 hello_vue.js의 이름을main으로 바꾸다.js로 변경하려면

입문

며칠 전에 나는 이 보도를 썼다.
[환경 구축] Docker+Rails6+Vue.js+Vuetify 환경 구축 절차 -Qiita
따라서 자동으로 생성된 app/javascript/hello_vue.js 이름을 main.js 로 변경하려는 사람을 위한 절차를 기록한다.(대상이 작아! 웃음)

환경

OS: macOS Catalina 10.15.3
Ruby: 2.6.5
Rails: 6.0.2.1
Docker: 19.03.5
docker-compose: 1.24.1
Vue: 2.6.10
vuetify: 2.1.0

전제 조건

이 문장에서 묘사한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.

1. 파일 이름 바꾸기

이름을 바꿉니다app/javascript/packs/hello_vue.js.hello_vue.js↓main.js

2.home/index.html/erb 변경

app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

app/views/home/index.html.erb

<%= javascript_pack_tag 'main' %>
<%= stylesheet_pack_tag 'main' %>

3. manifest.json에서 변경

마지막으로 Webpack 출력manifest.json을 사용해야 합니다.
public/packs/manifest.json

{
// 略
  "entrypoints": {
// 略
    "hello_vue": {
      "js": [
        "/packs/js/hello_vue-343ebbfc5aed29c10bf6.js"
      ],
      "js.map": [
        "/packs/js/hello_vue-343ebbfc5aed29c10bf6.js.map"
      ]
    },
// 略
  },
  "hello_vue.js": "/packs/js/hello_vue-343ebbfc5aed29c10bf6.js",
  "hello_vue.js.map": "/packs/js/hello_vue-343ebbfc5aed29c10bf6.js.map",
// 略
}

↓
public/packs/manifest.json

{
// 略
  "entrypoints": {
// 略
    "main": {
      "js": [
        "/packs/js/main-343ebbfc5aed29c10bf6.js"
      ],
      "js.map": [
        "/packs/js/main-343ebbfc5aed29c10bf6.js.map"
      ]
    },
// 略
  },
  "main.js": "/packs/js/main-343ebbfc5aed29c10bf6.js",
  "main.js.map": "/packs/js/main-343ebbfc5aed29c10bf6.js.map",
// 略
}

이상입니다!

끝내다

끝까지 읽어주셔서 감사합니다.
누구의 참고가 됐으면 좋겠다

저번 보도

[환경 구축] Docker+Rails6+Vue.js+Vuetify 환경 구축 절차 -Qiita