More than 3 years have passed since last update.

【環境構築】Rails6 + Vue.jsで hello_vue.jsの名前をmain.jsに変更したいときの手順

Posted at 2020-02-11

はじめに

先日、こちらの記事を書きました。
【環境構築】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",
// 略
}