nuxtで静的に生成したファイルのscriptが動かない

page/index.vue に以下のコードを書き、コンソールで npm run dev と入力すると動くのですが npm run generate で静的に生成した dist/index.html のスクリプトが動きません。

vue
1<template>
2  <section class="container">
3    <button @click="clickButton">click</button>
4  </section>
5</template>
6
7<script>
8  export default {
9    methods: {
10      clickButton () {
11        alert('おされたで')
12      }
13    }
14  }
15</script>

html
1<!doctype html>
2<html data-n-head="" data-n-head-ssr>
3
4<head>
5  <meta data-n-head="true" charset="utf-8">
6  <meta data-n-head="true" content="width=device-width,initial-scale=1" name="viewport">
7  <meta data-n-head="true" content="My priceless Nuxt.js project" name="description" data-hid="description">
8  <title data-n-head="true">dejihari_jp</title>
9  <link href="/favicon.ico" rel="icon" data-n-head="true" type="image/x-icon">
10  <base href="/test/">
11  <link href="/Users/hirahara/Desktop/test/_nuxt/manifest.421ec49e2c075d0cc1d9.js" rel="preload" as="script">
12  <link href="/Users/hirahara/Desktop/test/_nuxt/vendor.13ef70b463ce71c01a92.js" rel="preload" as="script">
13  <link href="/Users/hirahara/Desktop/test/_nuxt/app.c60f3365009abbe153cd.js" rel="preload" as="script">
14  <link href="/Users/hirahara/Desktop/test/_nuxt/layouts/default.01ffd4c652ddab959ea3.js" rel="preload" as="script">
15  <link href="/Users/hirahara/Desktop/test/_nuxt/pages/index.70eeb771762b8e0941c6.js" rel="preload" as="script">
16  <style data-vue-ssr-id="0c8fcbbc:0">
17  .nuxt-progress {
18    position: fixed;
19    top: 0;
20    left: 0;
21    right: 0;
22    height: 2px;
23    width: 0;
24    -webkit-transition: width .2s, opacity .4s;
25    transition: width .2s, opacity .4s;
26    opacity: 1;
27    background-color: #efc14e;
28    z-index: 999999
29  }
30
31  </style>
32  <style data-vue-ssr-id="55e366ea:0"></style>
33  <style data-vue-ssr-id="17b1fc80:0"></style>
34</head>
35
36<body data-n-head="">
37  <div id="__nuxt" data-server-rendered="true">
38    <div class="nuxt-progress" style="width:0%;height:2px;background-color:#fff;opacity:0"></div>
39    <div id="__layout">
40      <div>
41        <section class="container">
42          <button>click</button>
43        </section>
44      </div>
45    </div>
46  </div>
47  <script type="text/javascript">
48  window.__NUXT__ = { layout: "default", data: [{}], error: null, serverRendered: !0 }
49
50  </script>
51  <script defer src="/Users/hirahara/Desktop/test/_nuxt/manifest.421ec49e2c075d0cc1d9.js"></script>
52  <script defer src="/Users/hirahara/Desktop/test/_nuxt/layouts/default.01ffd4c652ddab959ea3.js"></script>
53  <script defer src="/Users/hirahara/Desktop/test/_nuxt/pages/index.70eeb771762b8e0941c6.js"></script>
54  <script defer src="/Users/hirahara/Desktop/test/_nuxt/vendor.13ef70b463ce71c01a92.js"></script>
55  <script defer src="/Users/hirahara/Desktop/test/_nuxt/app.c60f3365009abbe153cd.js"></script>
56
57

nuxt.config.jsでrouterの設定は行っており、エラーはでないのでパスが間違っているようではないのです。
開発環境はcreate-nuxt-appを使用しております。
ソースはこちらにおいております。

コンソールにエラーがでないのでどこに原因があるかわからず、どなたかわかる方いらっしゃいましたら教えていただけないでしょうか。

（補足）
distに生成されたファイルは以下のように表示されます。
コンソールにエラーもでずsourseからjsファイルもみれるのでパスの設定に問題はないと思っています。

行動規範の内容に同意します

回答1件

ベストアンサー

「おされたで」っていうalertが出ればいいんですよね？
正常に動作しますよ。

npm generate
して、
npm start
すれば、http://localhost:3000でWEBサーバが立ち上がるので、nuxt.config.jsのrouterで定義している通りにhttp://localhost:3000/testにアクセスすればページが表示され、clickボタンをクリックすればアラートが出ました。

投稿2018/09/22 08:35

spookybird

総合スコア1803

LayCharles

2018/09/22 10:56

説明足らずですみません。ローカルサーバー上での確認ではなく、nuxt generateコマンドをうったときに生成されるdist以下のindex.htmlで動かしたいです。 dist以下のファイルをサーバーにアップするとそのまま動いて欲しいのですが…

spookybird

2018/09/22 11:23

でしたら、routerで定義している`/test/`が余計なのでは。

LayCharles

2018/09/25 03:50

ごめんなさい、gitにあがっているものが実際の環境と違っておりました。修正済みです。ローカルで確認したいのでnuxt.config.js内のrouterを以下のように記載しています。 ``` router: { base: '/Users/hiraharareika/Desktop/nuxt_test/dist/' } ``` 他のパスで設定するとjsが読み込めないというエラーがコンソールに表示されるのですが、上記のパスで設定した場合はでないので、パスには問題がないように考えているのですが…

LayCharles

2018/09/25 03:54

補足に画像を追加しました。

spookybird

2018/09/25 05:00

あー。 Nuxtはサーバサイドレンダリングをする仕組みそのものから提供してくれるもので、nuxt start でサーバ起動してあげないとその機能は使えないそうです。 SSRをoffにすればいいっぽいですが、だったらなぜNuxt使うのか、って話になり兼ねないですね... ということで、本番での実行時にも nuxt start してあげてください。 https://note.mu/ar_ojisan/n/n02334166cf57 このへんとか参考に。

fuuki

2018/09/26 00:51

公式ガイド https://ja.nuxtjs.org/guide/commands/ の一番下の「シングルページアプリケーションデプロイ(SPA)」にあるように，SPA モードで生成すればいけると思います．ローカルのファイルを直接開いても動かないかもしれないですが，ホスティングサービスのあるサーバーへデプロイするなどで動くはずです．

LayCharles

2018/10/06 07:19

spookybirdさん、fuukiさんご回答有難うございました。そもそものnuxtのシステムを理解していなかったので大変勉強になりました。 fuukiさんのおっしゃる通り、spaモードにし、サーバーにアップロードしたら無事動きました。有難うごさいます。

行動規範の内容に同意します