Nuxt.js入門③サーバーを立ち上げてアクセスしてみよう！

サーバーを立ち上げてみよう

前回の記事で作成したNuxt.jsのプロジェクトのサーバーを立ち上げて見ましょう！

まずはcdコマンドでプロジェクトのディレクトリに移動します

$ cd <プロジェクトの名前>

僕は前回の記事で【Pllogg】というプロジェクト名で作成したため cd Pllogg と入力します。

移動に成功したらyarnコマンドを使用して開発用サーバーを立ち上げましょう!

$ yarn run dev



しばらく待ったのちに下記のような画面が表示されたらサーバーの立ち上げに成功です！

ですがvagrantのような仮想環境からサーバーを立ち上げた場合localhostではアクセスできないのでホストとポートの変更が必要になります。

その場合はプロジェクトのルートディレクトリにあるpackage.jsonの中に下記の中のマーカーの部分を追記します。今回は基本的なhost: 192.168.33.10 port: 8000に設定します。　追記する場所はどこでも構いません。

{
  "name": "Pllogg",
  "version": "1.0.0",
  "description": "My exquisite Nuxt.js project",
  "author": "",
  "private": true,
  "config": {
    "nuxt": {
      "host": "192.168.33.10",
      "port": "8000"
    }
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.0.0",
    "bootstrap-vue": "^2.0.0-beta",
    "bootstrap": "^4.1.3",
    "@nuxtjs/axios": "^5.0.0"
  },
  "devDependencies": {
    "nodemon": "^1.11.0",
    "babel-eslint": "^8.2.1",
    "eslint": "^5.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-vue": "^4.0.0",
    "eslint-config-prettier": "^3.1.0",
    "eslint-plugin-prettier": "2.6.2",
    "prettier": "1.14.3"
  }
}

この状態で

$ yarn run dev

とすると

このように Listening on: http://192.168.33.10:8000  となりホストとポートが変更できています!

実際にブラウザからアクセスしてみると・・・

思いっきりエラーが出ていますね・・・

ちなみにエラーの内容はこんな感じです。

僕は初めてNuxtを触った時にこのエラーが出てしまいかなりつまづいてしまいました（汗）何もファイルをいじっていないのにエラーメッセージが出るなんて焦りますよね・・・

でも落ち着いてエラーメッセージをよく読みましょう！

Pllogg/pages/index.vue　の36行目の改行を削除してね!という意味です冷静になって考えたらなんてことないエラーですよね(笑)

実際にコードを見て見ましょう

//上部分省略
<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

<style>

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

マーカーを引いてある部分が36行目です

なぜこのようなエラーが出てしまうのかというと、プロジェクトを作成する際にインストールしたJavaScriptの文章を綺麗にするプラグインが定めた書式のルール違反をしているからです。

なので36行目の改行を削除してやると・・・

やりました！！！！！！！

エラーメッセージが消えて初期画面が表示されています！

直接ファイルを消すのもいいですが、ターミナルに

$ yarn run lint --fix

と打ち込むことによって自動でエラーを修正することみ可能です！

これでサーバーの立ち上げ編は終了です！

次回はブログサイトの見た目をNuxt.jsで構築していきましょう！