Q&A
ご回答いただきまして，有難うございます．
助言いただいた通り試してみたのですが，表示されませんでした．
server.jsに関しては，以下のコードであれば表示されるます．
```
app.get('/form', function(res, req){
res.send('Hello');
});
```
前提・実現したいこと
Vue.js初心者です．
Vue.jsとNode.jsを利用してWebページを表示したいのですが，うまく表示してくれません．
何か足らないコードがあるのでしょうか．よろしくお願いします．
イメージは以下の通りです．
ディレクトリ構成
├── package-lock.json ├── package.json ├── public │ ├── form.html │ └── index.html ├── static │ └── src │ ├── App.vue │ ├── app.js │ └── components │ ├── Form.vue │ ├── Header.vue │ └── Top.vue ├── web │ └── server.js(Node.js) └── webpack.config.js
発生している問題・エラーメッセージ
http://hostname:port/formにアクセスしても何も表示されません．エラーも表示されていません．
ソースコード1(/web/server.js)
node
11 const hostname = '0.0.0.0'; 22 const port = 3000; 33 44 var express = require('express'); 55 var app = express(); 66 var logger = require('morgan'); 77 88 app.use(logger("short")); 99 1010 var listener = app.listen(port, function(){ 1111 console.log(`Server access http://${hostname}:${port}`) 1212 }); 1313 1414 1515 app.use(express.static('public')); 1616 app.get('/form', function(req, res){ 1717 res.sendFile('/home/username/folder/public/form.html');
ソースコード2(/static/src/app.js)
vue
11 import Vue from 'vue'; 22 import App from 'app'; 33 44 var vue = new Vue({ 55 el: "#app", 66 components: { 77 App 88 }, 99 template: "<App/>" 1010 });
ソースコード3(/static/src/App.vue)
vue
11 <template> 22 <div id="app"> 33 <Header/> 44 <Form/> 55 </div> 66 </template> 77 88 <script> 99 import Header from "./components/Header" 1010 import Form from "./components/Form" 1111 export default { 1212 name: 'app', 1313 components: { 1414 Header, 1515 Form 1616 } 1717 } 1818 </script> 1919 2020 <style lang="scss"> 2121 </style>
ソースコード4(/static/src/components/Header.vue)
vue
11 <template> 22 <div class="header"> 33 <h1>新しい服の登録</h1> 44 </div> 55 </template> 66 77 <style lang="scss" scoped> 88 .header { 99 color: #333; 1010 font-weight: bold; 1111 background: #E1F9F6; 1212 text-align: center; 1313 padding: 5px 0; 1414 } 15 </style>
ソースコード5(/static/src/components/Form.vue)
vue
11 <template> 2 <div class="container"> 23 <div class="kinds"> 34 <p>服の種類<input type="text" name="kinds" v-model="inputKinds"></p> 45 </div> 56 <div class="brands"> 67 <p>ブランド<inpit type="text" name="brands" v-model="inputBrands"></p> 78 </div> 89 </div> 910 </template> 1011 <script> 1112 export default { 1213 data() { 1314 return { 1415 inputKinds: "", 1516 inputBrands: "" 1617 }; 1718 }; 1819 </script>
ソースコード6(/public/form.html)
html
11 <!DOCTYPE> 22 <html> 33 <head> 44 <meta charset="utf-8"> 55 <title>登録画面</title> 66 </head> 77 88 <body> 99 <div id="app"> 1010 <App/> 1111 </div> 1212 1313 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 14 </body> 1415 </html>
補足情報（ツールのバージョン）
npm:6.14.4
Node:v14.0.0
vue:2.6.11
express:4.17.1
回答2件
0
node serverが起動するディレクトリあっていますか？
webフォルダの中で起動しているのであれば外のpathを指定してあげる必要があると思います。
server.jsに
nodejs
1const path = require('path') 2app.get('/', (req, res) => res.sendFile(path.join(__dirname, '/public/form.html')))
と書いて見たらどうでしょう？
余談ですが...
データ渡したいとき確かテンプレートのライブラリ使ってた気がします。
投稿2020/04/26 13:30
編集2020/04/26 13:33
総合スコア8
0
ホストを指定する場合はlisthenにport,hostの順番で指定する必要があります
js
1app.listen(port,host,function)
これができたら以下のURLで表示できるはずです
0.0.0.0:3000/from
投稿2020/04/26 12:50
総合スコア759
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/26 14:37 編集
2020/04/26 14:46
2020/04/26 15:12
2020/04/26 15:29