Vue.jsを使ったwebサイトの公開

現在vue.jsを使ってwebサイトを作っております。

netlifyを使って公開を試みたのですが、
トップページは表示される一方、他のページに遷移すると
localhostとなって他のPCからアクセスできません。

その為、他のPCからもアクセスできるようにしたいのですが、
どの辺りを修正したらよろしいでしょうか。
御回答頂けますと幸いです????‍♂️

index.html
1<body>
2<header>
3</header>
4<div id="app"></div>
5<footer>
6<RouterLink to="/contact">contact</RouterLink>
7</footer>
8</body>

App.vue
1<template>
2  <div id="app">
3    <!-- <div id="header"> -->
4      <router-link to="/"></router-link>
5      <router-link to="/page1"></router-link>
6      <router-link to="/page2"></router-link>
7      <router-link to="/page3"></router-link>
8      <router-link to="/page4"></router-link>
9      <router-link to="/page5"></router-link>
10      <router-link to="/page6"></router-link>
11      <router-link to="/contact"></router-link>
12    <!-- </div> -->
13    <router-view></router-view>
14  </div>
15</template>
16
17<script>
18export default {
19  name: "App",
20};
21</script>

main.js
1// The Vue build version to load with the `import` command
2// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3import Vue from 'vue'
4import App from './App'
5import router from './router'
6
7Vue.config.productionTip = false
8
9/* eslint-disable no-new */
10new Vue({
11  el: '#app',
12  router,
13  components: { App },
14  template: '<App/>'
15})

router/index.js
1import Vue from 'vue'
2import Router from 'vue-router'
3import top from '@/components/top'
4import page1 from '@/components/page1'
5import page2 from '@/components/page2'
6import page3 from '@/components/page3'
7import page4 from '@/components/page4'
8import page5 from '@/components/page5'
9import page6 from '@/components/page6'
10import contact from '@/components/contact'
11
12Vue.use(Router)
13
14export default new Router({
15  routes: [
16    {
17      path: '/',
18      component: top
19    },
20    {
21      path: '/page1',
22      component: page1
23    },
24    {
25      path: '/page2',
26      component: page2
27    },
28    {
29      path: '/page3',
30      component: page3
31    },
32    {
33      path: '/page4',
34      component: page4
35    },
36    {
37      path: '/page5',
38      component: page5
39    },
40    {
41      path: '/page6',
42      component: page6
43    },
44    {
45      path: '/contact',
46      component: contact
47    }
48  ]
49})

config/prod.env.js
1'use strict'
2module.exports = {
3NODE_ENV: '"production"'
4}

mather

2021/09/07 10:46

画像貼り付けは非常に読みにくいので、ソースコードはコードブロックで提示してください。 config/prod.env.js というファイルがあるようですが、内容はどうなっていますか？また、Netlifyにデプロイされるときは prod.env.js が読み込まれるように指定されていますか？

mather

2021/09/07 11:01

元になっているテンプレートはこちらですね。 https://github.com/vuejs-templates/webpack/tree/1.3.1

mtys

2021/09/07 13:25

mather様承知致しました。読みにくかったこと、申し訳ありません。 config/prod.env.jsはこのようになっております。 'use strict' module.exports = { NODE_ENV: '"production"' } こちらが読み込まれるようにNetlifyにデプロイしたらよろしいのでしょうか。 webサイト作成はこちらの記事を参考にしました。 https://qiita.com/nagimaruxxx/items/8fc59a5ca05bb91bfe1f

mather

2021/09/08 06:54

ソースコードはコードブロックを使って記載しましょう。 https://teratail.com/help/question-tips#questionTips3-5-1

mtys

2021/09/08 07:21 編集

mather様承知致しました。コードブロックを使ってなくって申し訳ありません。コードブロックを使って再度掲載致しました????