teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問Django(REST API)とVue.jsを使ってSPAを作成する方法

編集履歴

質問編集履歴

4

vue.config.jsの更新。環境のバージョン追記

2020/03/23 12:35

投稿

stakizawa
stakizawa

スコア117

test CHANGED
File without changes
test CHANGED
@@ -28,13 +28,13 @@
28
28
 
29
29
 
30
30
 
31
- 1. バンドル先の設定方法
31
+ 1. vue.config.jsの記述方法
32
32
 
33
33
  2. DjangoテンプレートとVueの共存方法
34
34
 
35
35
 
36
36
 
37
- ##### バンドル先の設定方法
37
+ ##### vue.config.jsの記述方法
38
38
 
39
39
  vue.config.jsでバンドル先を設定しているのですが、下記ディレクトリ構成のように指定したいです。
40
40
 
@@ -44,45 +44,69 @@
44
44
 
45
45
  ```javascript
46
46
 
47
- // 現在のvue.config.js
47
+ // vue.config.js
48
-
49
- const BundleTracker = require('webpack-bundle-tracker')
50
-
51
-
52
48
 
53
49
  module.exports = {
54
50
 
55
51
  transpileDependencies: [
56
52
 
57
- 'vuetify'
53
+ 'vuetify'
58
54
 
59
55
  ],
60
56
 
61
- // ローカルサーバーのIP設定
62
-
63
57
  devServer: {
64
58
 
59
+ proxy: {
60
+
61
+ '^/api': {
62
+
63
+ target: 'http://192.168.33.12:8000',
64
+
65
+ changeOrigin: true,
66
+
67
+ ws: true,
68
+
69
+ pathRewrite: {
70
+
71
+ '^/api': 'api'
72
+
73
+ }
74
+
75
+ }
76
+
77
+ },
78
+
65
- port: 8080,
79
+ port: 8080,
66
-
80
+
67
- host: '192.168.33.12',
81
+ host: '192.168.33.12',
68
82
 
69
83
  },
70
84
 
71
- // serverで展開する
72
-
73
- outputDir: '../django-server',
85
+ outputDir: '../server',
74
-
75
- // サーバーを起動したときのルートパス
76
86
 
77
87
  publicPath: '/',
78
88
 
79
- // outputDir起点で、index.htmlを格納する場所
80
-
81
89
  indexPath: 'templates/index.html',
82
90
 
83
- // outputDir起点で、staticファイルを格納する場所
84
-
85
- assetsDir: 'static'
91
+ assetsDir: 'static',
92
+
93
+ configureWebpack: {
94
+
95
+ module: {
96
+
97
+ rules: [
98
+
99
+ {
100
+
101
+
102
+
103
+ }
104
+
105
+ ]
106
+
107
+ }
108
+
109
+ }
86
110
 
87
111
  }
88
112
 
@@ -104,19 +128,19 @@
104
128
 
105
129
  | ├─templates/
106
130
 
107
- | | ├─login.html // ここにバンドルされたhtmlを置きたい
131
+ | | ├─login.html # ここにバンドルされたhtmlを置きたい
108
-
132
+
109
- | | └─index.html // ここにバンドルされたhtmlを置きたい
133
+ | | └─index.html # ここにバンドルされたhtmlを置きたい
110
134
 
111
135
  | |
112
136
 
113
137
  | ├─static/
114
138
 
115
- | | ├─css/ // ここにバンドルされたcssディレクトリを置きたい
139
+ | | ├─css/ # ここにバンドルされたcssディレクトリを置きたい
116
-
140
+
117
- | | ├─sacc/ // ここにバンドルされたscssディレクトリを置きたい
141
+ | | ├─sacc/ # ここにバンドルされたscssディレクトリを置きたい
118
-
142
+
119
- | | └─js/ // ここにバンドルされたjsディレクトリを置きたい
143
+ | | └─js/ # ここにバンドルされたjsディレクトリを置きたい
120
144
 
121
145
  | |
122
146
 
@@ -132,11 +156,11 @@
132
156
 
133
157
  | ├─assetes/
134
158
 
135
- | | ├─css/ // バンドル前のcssディレクトリ。ここで編集する？
159
+ | | ├─css/ # バンドル前のcssディレクトリ。ここで編集する？
136
-
160
+
137
- | | ├─scss/ // バンドル前のscssディレクトリ。ここで編集する？
161
+ | | ├─scss/ # バンドル前のscssディレクトリ。ここで編集する？
138
-
162
+
139
- | | └─js/ // バンドル前のjsディレクトリ。ここで編集する？
163
+ | | └─js/ # バンドル前のjsディレクトリ。ここで編集する？
140
164
 
141
165
  | |
142
166
 
@@ -152,9 +176,9 @@
152
176
 
153
177
  | ├─templates/
154
178
 
155
- | | ├─login.html // バンドル前のlogin.html。ここで編集する？
179
+ | | ├─login.html # バンドル前のlogin.html。ここでDjangoのテンプレートを使用して編集する？
156
-
180
+
157
- | | └─index.html // バンドル前のindex.html。ここで編集する？
181
+ | | └─index.html # バンドル前のindex.html。ここでDjangoのテンプレートを使用して編集する？
158
182
 
159
183
  | |
160
184
 
@@ -196,8 +220,6 @@
196
220
 
197
221
 
198
222
 
199
-
200
-
201
223
  下記URLのように記述したいです。
202
224
 
203
225
  [vue.jsのDjangoでの使いどころ](https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b)
@@ -206,15 +228,21 @@
206
228
 
207
229
  ### 環境
208
230
 
231
+ - VirtualBox
232
+
233
+ - vagrant
234
+
209
235
  - centos-7
210
236
 
211
- - Python
237
+ - Python 3.7.0
212
-
238
+
213
- - Django
239
+ - Django 2.5.5
214
-
240
+
215
- - Vue.js
241
+ - Vue.js 2.6.11
242
+
216
-
243
+ - vue/cli 4.2.3
244
+
217
- - Vuetify
245
+ - Vuetify 2.2.11
218
246
 
219
247
 
220
248
 

3

URLの修正

2020/03/23 12:35

投稿

stakizawa
stakizawa

スコア117

test CHANGED
File without changes
test CHANGED
@@ -200,7 +200,7 @@
200
200
 
201
201
  下記URLのように記述したいです。
202
202
 
203
- [vue.jsのDjangoでの使いどころ]https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b
203
+ [vue.jsのDjangoでの使いどころ](https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b)
204
204
 
205
205
 
206
206
 

2

Djangoテンプレートと共存方法の考察を追加

2020/03/18 08:44

投稿

stakizawa
stakizawa

スコア117

test CHANGED
File without changes
test CHANGED
@@ -2,21 +2,21 @@
2
2
 
3
3
  #### 前提
4
4
 
5
- - サーバサイドはDjangoのREST APIを使用
5
+ - サーバサイド:Django(REST API)
6
-
6
+
7
- django-restframework
7
+ django-restframework
8
-
8
+
9
- rest-framework-jwt
9
+ rest-framework-jwt
10
-
10
+
11
- webpack-loader
11
+ webpack-loader
12
-
13
-
14
-
12
+
13
+
14
+
15
- - フロントサイドはVue.jsを使用
15
+ - フロントサイド:Vue.js
16
-
16
+
17
- vueCLIで構築
17
+ vueCLIで構築
18
-
18
+
19
- Vuetify
19
+ Vuetify
20
20
 
21
21
 
22
22
 
@@ -42,7 +42,7 @@
42
42
 
43
43
 
44
44
 
45
- ```vue.config.js
45
+ ```javascript
46
46
 
47
47
  // 現在のvue.config.js
48
48
 
@@ -92,6 +92,8 @@
92
92
 
93
93
  ###### 現状のディレクトリ構成
94
94
 
95
+ ```
96
+
95
97
  SPA-Project/
96
98
 
97
99
  ├─django_server/
@@ -102,19 +104,19 @@
102
104
 
103
105
  | ├─templates/
104
106
 
105
- | | ├─login.html // バンドルされたhtml
107
+ | | ├─login.html // ここにバンドルされたhtmlを置きたい
106
-
108
+
107
- | | └─index.html // バンドルされたhtml
109
+ | | └─index.html // ここにバンドルされたhtmlを置きたい
108
110
 
109
111
  | |
110
112
 
111
113
  | ├─static/
112
114
 
113
- | | ├─css/ // バンドルされたcssディレクトリ
115
+ | | ├─css/ // ここにバンドルされたcssディレクトリを置きたい
114
-
116
+
115
- | | ├─sacc/ // バンドルされたscssディレクトリ
117
+ | | ├─sacc/ // ここにバンドルされたscssディレクトリを置きたい
116
-
118
+
117
- | | └─js/ // バンドルされたjsディレクトリ
119
+ | | └─js/ // ここにバンドルされたjsディレクトリを置きたい
118
120
 
119
121
  | |
120
122
 
@@ -130,11 +132,11 @@
130
132
 
131
133
  | ├─assetes/
132
134
 
133
- | | ├─css/ // バンドル前のcssディレクトリ。ここで編集とかする？
135
+ | | ├─css/ // バンドル前のcssディレクトリ。ここで編集する？
134
-
136
+
135
- | | ├─scss/ // バンドル前のscssディレクトリ。ここで編集とかする？
137
+ | | ├─scss/ // バンドル前のscssディレクトリ。ここで編集する？
136
-
138
+
137
- | | └─js/ // バンドル前のjsディレクトリ。ここで編集とかする？
139
+ | | └─js/ // バンドル前のjsディレクトリ。ここで編集する？
138
140
 
139
141
  | |
140
142
 
@@ -148,9 +150,13 @@
148
150
 
149
151
  | ├─views/
150
152
 
153
+ | ├─templates/
154
+
151
- | ├─login.html // バンドル前のlogin.html。ここで編集する？
155
+ | | ├─login.html // バンドル前のlogin.html。ここで編集する？
152
-
156
+
153
- | ├─index.html // バンドル前のindex.html。ここで編集する？
157
+ | | └─index.html // バンドル前のindex.html。ここで編集する？
158
+
159
+ | |
154
160
 
155
161
  | ├─App.vue
156
162
 
@@ -166,7 +172,7 @@
166
172
 
167
173
  └─.editorconfig
168
174
 
169
-
175
+ ```
170
176
 
171
177
  ##### Djangoテンプレートとの共存
172
178
 
@@ -176,9 +182,25 @@
176
182
 
177
183
 
178
184
 
185
+ **vue_client/src/templates/index.html**に下記のように記述すれば、Djangoテンプレートとvueの共存が可能になるのか？
186
+
187
+ ```html
188
+
189
+ {% verbatim %}
190
+
191
+ <h1>{{ django.temp }}</h1>
192
+
193
+ {% endverbatim %}
194
+
195
+ ```
196
+
197
+
198
+
199
+
200
+
179
201
  下記URLのように記述したいです。
180
202
 
181
- [vue.jsのDjangoでの使いどころ](https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b)
203
+ [vue.jsのDjangoでの使いどころ]https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b
182
204
 
183
205
 
184
206
 
@@ -192,7 +214,7 @@
192
214
 
193
215
  - Vue.js
194
216
 
195
- - Vuetify
217
+ - Vuetify
196
218
 
197
219
 
198
220
 

1

URLの修正

2020/03/18 08:42

投稿

stakizawa
stakizawa

スコア117

test CHANGED
File without changes
test CHANGED
@@ -178,7 +178,7 @@
178
178
 
179
179
  下記URLのように記述したいです。
180
180
 
181
- https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b
181
+ [vue.jsのDjangoでの使いどころ](https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b)
182
182
 
183
183
 
184
184