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

編集履歴

質問編集履歴

4

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

2020/03/23 12:35

投稿

stakizawa
stakizawa

スコア117

title CHANGED
File without changes
body CHANGED
@@ -13,34 +13,46 @@
13
13
  Django REST APIとVue.jsを使用してSPAを作成しようと考えています。
14
14
  上記の構成で実装する上で質問が2点あります。
15
15
 
16
- 1. バンドル先の設定方法
16
+ 1. vue.config.jsの記述方法
17
17
  2. DjangoテンプレートとVueの共存方法
18
18
 
19
- ##### バンドル先の設定方法
19
+ ##### vue.config.jsの記述方法
20
20
  vue.config.jsでバンドル先を設定しているのですが、下記ディレクトリ構成のように指定したいです。
21
21
  また、初歩的な質問になるのですが、バンドルする前のhtmlやcssはどこで管理しておくべきなのでしょうか？
22
22
 
23
23
  ```javascript
24
- // 現在のvue.config.js
24
+ // vue.config.js
25
- const BundleTracker = require('webpack-bundle-tracker')
26
-
27
25
  module.exports = {
28
26
  transpileDependencies: [
29
- 'vuetify'
27
+ 'vuetify'
30
28
  ],
31
- // ローカルサーバーのIP設定
32
29
  devServer: {
30
+ proxy: {
31
+ '^/api': {
32
+ target: 'http://192.168.33.12:8000',
33
+ changeOrigin: true,
34
+ ws: true,
35
+ pathRewrite: {
36
+ '^/api': 'api'
37
+ }
38
+ }
39
+ },
33
- port: 8080,
40
+ port: 8080,
34
- host: '192.168.33.12',
41
+ host: '192.168.33.12',
35
42
  },
36
- // serverで展開する
37
- outputDir: '../django-server',
43
+ outputDir: '../server',
38
- // サーバーを起動したときのルートパス
39
44
  publicPath: '/',
40
- // outputDir起点で、index.htmlを格納する場所
41
45
  indexPath: 'templates/index.html',
42
- // outputDir起点で、staticファイルを格納する場所
43
- assetsDir: 'static'
46
+ assetsDir: 'static',
47
+ configureWebpack: {
48
+ module: {
49
+ rules: [
50
+ {
51
+
52
+ }
53
+ ]
54
+ }
55
+ }
44
56
  }
45
57
  ```
46
58
 
@@ -51,13 +63,13 @@
51
63
  | ├─django_server/
52
64
  | ├─django_app/
53
65
  | ├─templates/
54
- | | ├─login.html // ここにバンドルされたhtmlを置きたい
66
+ | | ├─login.html # ここにバンドルされたhtmlを置きたい
55
- | | └─index.html // ここにバンドルされたhtmlを置きたい
67
+ | | └─index.html # ここにバンドルされたhtmlを置きたい
56
68
  | |
57
69
  | ├─static/
58
- | | ├─css/ // ここにバンドルされたcssディレクトリを置きたい
70
+ | | ├─css/ # ここにバンドルされたcssディレクトリを置きたい
59
- | | ├─sacc/ // ここにバンドルされたscssディレクトリを置きたい
71
+ | | ├─sacc/ # ここにバンドルされたscssディレクトリを置きたい
60
- | | └─js/ // ここにバンドルされたjsディレクトリを置きたい
72
+ | | └─js/ # ここにバンドルされたjsディレクトリを置きたい
61
73
  | |
62
74
  | ├─db.sqlite3
63
75
  | └─manage.py
@@ -65,9 +77,9 @@
65
77
  └─vue_client/
66
78
  ├─src/
67
79
  | ├─assetes/
68
- | | ├─css/ // バンドル前のcssディレクトリ。ここで編集する？
80
+ | | ├─css/ # バンドル前のcssディレクトリ。ここで編集する？
69
- | | ├─scss/ // バンドル前のscssディレクトリ。ここで編集する？
81
+ | | ├─scss/ # バンドル前のscssディレクトリ。ここで編集する？
70
- | | └─js/ // バンドル前のjsディレクトリ。ここで編集する？
82
+ | | └─js/ # バンドル前のjsディレクトリ。ここで編集する？
71
83
  | |
72
84
  | ├─components/
73
85
  | ├─plugins/
@@ -75,8 +87,8 @@
75
87
  | ├─store/
76
88
  | ├─views/
77
89
  | ├─templates/
78
- | | ├─login.html // バンドル前のlogin.html。ここで編集する？
90
+ | | ├─login.html # バンドル前のlogin.html。ここでDjangoのテンプレートを使用して編集する？
79
- | | └─index.html // バンドル前のindex.html。ここで編集する？
91
+ | | └─index.html # バンドル前のindex.html。ここでDjangoのテンプレートを使用して編集する？
80
92
  | |
81
93
  | ├─App.vue
82
94
  | └─main.js
@@ -97,15 +109,17 @@
97
109
  {% endverbatim %}
98
110
  ```
99
111
 
100
-
101
112
  下記URLのように記述したいです。
102
113
  [vue.jsのDjangoでの使いどころ](https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b)
103
114
 
104
115
  ### 環境
116
+ - VirtualBox
117
+ - vagrant
105
118
  - centos-7
106
- - Python
119
+ - Python 3.7.0
107
- - Django
120
+ - Django 2.5.5
108
- - Vue.js
121
+ - Vue.js 2.6.11
122
+ - vue/cli 4.2.3
109
- - Vuetify
123
+ - Vuetify 2.2.11
110
124
 
111
125
  以上、拙い文章ではございますが、どなたかご教授いただけると幸いです。

3

URLの修正

2020/03/23 12:35

投稿

stakizawa
stakizawa

スコア117

title CHANGED
File without changes
body CHANGED
@@ -99,7 +99,7 @@
99
99
 
100
100
 
101
101
  下記URLのように記述したいです。
102
- [vue.jsのDjangoでの使いどころ]https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b
102
+ [vue.jsのDjangoでの使いどころ](https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b)
103
103
 
104
104
  ### 環境
105
105
  - centos-7

2

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

2020/03/18 08:44

投稿

stakizawa
stakizawa

スコア117

title CHANGED
File without changes
body CHANGED
@@ -1,13 +1,13 @@
1
1
  ### 前提・実現したいこと
2
2
  #### 前提
3
- - サーバサイドはDjangoのREST APIを使用
3
+ - サーバサイド:Django(REST API)
4
- django-restframework
4
+ django-restframework
5
- rest-framework-jwt
5
+ rest-framework-jwt
6
- webpack-loader
6
+ webpack-loader
7
7
 
8
- - フロントサイドはVue.jsを使用
8
+ - フロントサイド:Vue.js
9
- vueCLIで構築
9
+ vueCLIで構築
10
- Vuetify
10
+ Vuetify
11
11
 
12
12
  #### 実現したいこと
13
13
  Django REST APIとVue.jsを使用してSPAを作成しようと考えています。
@@ -20,7 +20,7 @@
20
20
  vue.config.jsでバンドル先を設定しているのですが、下記ディレクトリ構成のように指定したいです。
21
21
  また、初歩的な質問になるのですが、バンドルする前のhtmlやcssはどこで管理しておくべきなのでしょうか？
22
22
 
23
- ```vue.config.js
23
+ ```javascript
24
24
  // 現在のvue.config.js
25
25
  const BundleTracker = require('webpack-bundle-tracker')
26
26
 
@@ -45,18 +45,19 @@
45
45
  ```
46
46
 
47
47
  ###### 現状のディレクトリ構成
48
+ ```
48
49
  SPA-Project/
49
50
  ├─django_server/
50
51
  | ├─django_server/
51
52
  | ├─django_app/
52
53
  | ├─templates/
53
- | | ├─login.html // バンドルされたhtml
54
+ | | ├─login.html // ここにバンドルされたhtmlを置きたい
54
- | | └─index.html // バンドルされたhtml
55
+ | | └─index.html // ここにバンドルされたhtmlを置きたい
55
56
  | |
56
57
  | ├─static/
57
- | | ├─css/ // バンドルされたcssディレクトリ
58
+ | | ├─css/ // ここにバンドルされたcssディレクトリを置きたい
58
- | | ├─sacc/ // バンドルされたscssディレクトリ
59
+ | | ├─sacc/ // ここにバンドルされたscssディレクトリを置きたい
59
- | | └─js/ // バンドルされたjsディレクトリ
60
+ | | └─js/ // ここにバンドルされたjsディレクトリを置きたい
60
61
  | |
61
62
  | ├─db.sqlite3
62
63
  | └─manage.py
@@ -64,17 +65,19 @@
64
65
  └─vue_client/
65
66
  ├─src/
66
67
  | ├─assetes/
67
- | | ├─css/ // バンドル前のcssディレクトリ。ここで編集とかする？
68
+ | | ├─css/ // バンドル前のcssディレクトリ。ここで編集する？
68
- | | ├─scss/ // バンドル前のscssディレクトリ。ここで編集とかする？
69
+ | | ├─scss/ // バンドル前のscssディレクトリ。ここで編集する？
69
- | | └─js/ // バンドル前のjsディレクトリ。ここで編集とかする？
70
+ | | └─js/ // バンドル前のjsディレクトリ。ここで編集する？
70
71
  | |
71
72
  | ├─components/
72
73
  | ├─plugins/
73
74
  | ├─router/
74
75
  | ├─store/
75
76
  | ├─views/
77
+ | ├─templates/
76
- | ├─login.html // バンドル前のlogin.html。ここで編集する？
78
+ | | ├─login.html // バンドル前のlogin.html。ここで編集する？
77
- | ├─index.html // バンドル前のindex.html。ここで編集する？
79
+ | | └─index.html // バンドル前のindex.html。ここで編集する？
80
+ | |
78
81
  | ├─App.vue
79
82
  | └─main.js
80
83
  |
@@ -82,19 +85,27 @@
82
85
  ├─vue.config.js
83
86
  ├─babel.config.js
84
87
  └─.editorconfig
85
-
88
+ ```
86
89
  ##### Djangoテンプレートとの共存
87
90
  webpack-loaderでバンドルされたjsを読み込むことまでは理解できたつもりなのですが、
88
91
  Djangoテンプレートと共存する際は、バンドル前のhtmlにDjangoのテンプレートタグを記述するのかがよくわかりませんでした。
89
92
 
93
+ **vue_client/src/templates/index.html**に下記のように記述すれば、Djangoテンプレートとvueの共存が可能になるのか？
94
+ ```html
95
+ {% verbatim %}
96
+ <h1>{{ django.temp }}</h1>
97
+ {% endverbatim %}
98
+ ```
99
+
100
+
90
101
  下記URLのように記述したいです。
91
- [vue.jsのDjangoでの使いどころ](https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b)
102
+ [vue.jsのDjangoでの使いどころ]https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b
92
103
 
93
104
  ### 環境
94
105
  - centos-7
95
106
  - Python
96
107
  - Django
97
108
  - Vue.js
98
- - Vuetify
109
+ - Vuetify
99
110
 
100
111
  以上、拙い文章ではございますが、どなたかご教授いただけると幸いです。

1

URLの修正

2020/03/18 08:42

投稿

stakizawa
stakizawa

スコア117

title CHANGED
File without changes
body CHANGED
@@ -88,7 +88,7 @@
88
88
  Djangoテンプレートと共存する際は、バンドル前のhtmlにDjangoのテンプレートタグを記述するのかがよくわかりませんでした。
89
89
 
90
90
  下記URLのように記述したいです。
91
- https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b
91
+ [vue.jsのDjangoでの使いどころ](https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b)
92
92
 
93
93
  ### 環境
94
94
  - centos-7