KYO

Nuxt.jsをサーバーで動かす時の設定

2018年11月28日 Nuxt.js

npm run generateでdistフォルダが出来上がるが、それをサーバーに置くとどうなるのか実験しました。

とりあえず何も考えずに超絶シンプルなものを作る

pages/hoge.vue

assets/css/style.css

nuxt.config.js

pages/index.vue

 

こんだけです。

assetsにcssを設置して超シンプルなルーターリンクを設定。
これで

npm run generate

でdistフォルダを出力します。
そして、サーバーにアップロードします

http://poridiet.com/nuxttest1/

という場所にアップロード。
アクセスすると想定通りのindex.vueの内容が表示されるが、hoge.vueへのリンクをクリックするとエラーです。

というのもアクセス先が、http://poridiet.com/hoge/になってしまうからです。
http://poridiet.com/nuxttest1/hogeにしないといけません。
実際にここに直接アクセスすると正しく表示されていました。

 

そこでnuxt.config.jsを編集します

router: { base: ‘/nuxttest1/’ },

を追加しました。
参考:routerプロパティ

こうすることでベースのURLがnuxttest1になるのでルーターがうまく動作します。


関連記事

Nuxt.jsでaxiosとvuexを使ってみる

2018年11月27日

最近Vue.jsが面白くて勉強して、Nuxt.jsも勉強し始めたのでメモします。   キーワードを入力するとQiitaから関連する記事を取得してきて表示するというシンプルなサイトを作ってみました。 ただ作るのはあれなんで、厨二病っぽいデザインにしました これでスタバにいってドヤ顔しましょう 英語はよくわかんないので強そうなワード...