teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

追記

2021/02/13 07:04

投稿

da_ast
da_ast

スコア7

title CHANGED
File without changes
body CHANGED
@@ -122,4 +122,7 @@
122
122
  "fibers": "^5.0.0",
123
123
  "webpack-dev-server": "^3.11.0"
124
124
  }
125
- ```
125
+ ```
126
+
127
+ ###追記
128
+ 一応タブやその中身の位置はある程度正確に表示されているのでCSSは反映されているのかもしれない。[[Vuetify] v-tab-itemの子要素は、タブがactive化した時に初めてレンダリングされる](https://www.hideyana.com/entry/20200120/1579527065)とのことなので、記述している文法が間違っているので正確なレンダリングがされていないのかもしれない。しかしだとするとなぜ開発環境では思った通りに表示されているのか…

2

追記

2021/02/13 07:04

投稿

da_ast
da_ast

スコア7

title CHANGED
File without changes
body CHANGED
@@ -24,6 +24,11 @@
24
24
  vue 2.6.12
25
25
  vuetify 2.4.4
26
26
 
27
+ ●本番環境
28
+ AWS EC2
29
+ Puma
30
+ Nginx
31
+
27
32
  ###htmlファイル
28
33
  ```
29
34
  <div id="home">

1

情報の追加

2021/02/13 04:37

投稿

da_ast
da_ast

スコア7

title CHANGED
File without changes
body CHANGED
@@ -17,4 +17,104 @@
17
17
  いろいろ試しているのですが原因がわからず、ご教授いただけないでしょうか。
18
18
  webpackerの設定の問題かとも思ったのですが、正しい書き方がよくわからず…
19
19
  ご指摘いただければ必要な参照ファイルを提示します。
20
- よろしくお願いします。
20
+ よろしくお願いします。
21
+
22
+ ##環境
23
+ rails6.0.3.4
24
+ vue 2.6.12
25
+ vuetify 2.4.4
26
+
27
+ ###htmlファイル
28
+ ```
29
+ <div id="home">
30
+ <template>
31
+ <v-app>
32
+     ・
33
+
34
+
35
+ <v-tabs color="amber">
36
+  <v-tab class='headline text-dark'>タブ1</v-tab>
37
+ <v-tab-Item>
38
+   <p>タブ1中身</p>
39
+ </v-tab-Item>
40
+ <v-tab class='headline text-dark'>タブ2</v-tab>
41
+ <v-tab-Item>
42
+ <p>タブ2中身</p>
43
+ </v-tab-Item>
44
+ <v-tab class='headline text-dark'>タブ3</v-tab>
45
+ <v-tab-Item>
46
+ <p>タブ3中身</p>
47
+ </v-tab-Item>
48
+ </v-tabs>
49
+     ・
50
+
51
+
52
+ </v-app>
53
+ </template>
54
+ </div>
55
+ ```
56
+
57
+ ##jsファイル
58
+ ```
59
+ import Vue from 'vue'
60
+ import Vuetify from "vuetify"
61
+ import "vuetify/dist/vuetify.min.css"
62
+
63
+ Vue.use(Vuetify)
64
+ const vuetify = new Vuetify()
65
+
66
+ document.addEventListener('DOMContentLoaded', () => {
67
+ const home = new Vue({
68
+ el: '#home',
69
+ vuetify
70
+ })
71
+ })
72
+
73
+ ```
74
+
75
+ ##config/webpack/environment.js
76
+ webpackerの設定はよく理解できておらず、調べたものをそのままコピペしたりもしているので、適切でない記述があるかもしれません。
77
+ ```
78
+ const { environment } = require('@rails/webpacker')
79
+ const { VueLoaderPlugin } = require('vue-loader')
80
+ const vue = require('./loaders/vue')
81
+
82
+ environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
83
+ environment.loaders.prepend('vue', {
84
+ test: /.vue$/,
85
+ use: [{
86
+ loader: 'vue-loader'
87
+ }]
88
+ })
89
+
90
+ environment.loaders.prepend('vue', vue)
91
+ module.exports = environment
92
+
93
+ environment.config.merge({
94
+ resolve: {
95
+ alias: {
96
+ 'vue$': 'vue/dist/vue.esm.js'
97
+ }
98
+ }
99
+ })
100
+ ```
101
+
102
+ ##package/json
103
+ ```
104
+ "dependencies": {
105
+
106
+
107
+
108
+ "sass": "^1.32.7",
109
+ "sass-loader": "10.1.1",
110
+ "vue": "^2.6.12",
111
+ "vue-loader": "^15.9.6",
112
+ "vue-template-compiler": "^2.6.12",
113
+ "vuetify": "^2.4.4"
114
+ },
115
+ "devDependencies": {
116
+ "deepmerge": "^4.2.2",
117
+ "fibers": "^5.0.0",
118
+ "webpack-dev-server": "^3.11.0"
119
+ }
120
+ ```