サーバーを立ち上げてみよう
前回の記事で作成した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
と打ち込むことによって自動でエラーを修正することみ可能です！
僕は新しく作成したプロジェクトのサーバーを立ち上げる際に毎回このエラーメッセージが表示されます（笑）
なので読者の皆さんにも表示されるかもしれないと思い、念のために取り上げさせていただきました。
内容から見ても本来ならスルーしても大丈夫な内容なので特に気にすることなくプロジェクトを立ち上げたら真っ先に36行目の改行を消しにいっています(笑)
これでサーバーの立ち上げ編は終了です！
次回はブログサイトの見た目をNuxt.jsで構築していきましょう！