More than 1 year has passed since last update.

Laravel + Vue + ViteのIPでアクセスできる開発環境を構築する

Posted at 2023-09-20

はじめに

Laravel + Vue + Vite の開発環境構築をDockerを利用しないで行う。
最終的にはDockerで構成するが、流れを理解するために初期画面を表示させるところまでをオンプレサーバーのVMware上で行う。
IPでアクセスして表示できるところまでをゴールとする。

参考

Laravel9のVite環境でVue.js 3を利用する方法

Github

実行した内容

laravelプロジェクト作成

composer create-project laravel/laravel laravel_vite_vue3
cd laravel_vite_vue3

ライブラリのインストール(Linuxの仮想OSで利用するためにOS上で行わないとエラーが発生する)
```
npm install
```

Vite で Vue.js を利用するために@vitejs/plugin-vue のインストールとvite.confirg.jsの追加設定

npm i @vitejs/plugin-vue --save-dev

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue(),
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
  server: {
	  host:'xxx.xxx.xxx.xxx', // VMのIPを記載
	  port:5173
  }
});

サーバー立ち上げ(エラーが発生しなければOK)
```
npm run dev
```

app.jsファイルの読みこみ

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Laravel Vite React</title>
    @vit_sility e(['resources/css/app.css', 'resources/js/app.js'])
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Laravel開発サーバーを起動
```
php artisan serve --host 0.0.0.0
```
ブラウザでアクセスして確認する（http://xxx.xxx.xxx.xxx:8000）

bootstrap.jsにVue.jsのコードを記載する

import _ from 'lodash';
window._ = _;

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import { createApp } from 'vue';

// vueのインスタンスを作成
const app = createApp();

console.log(app.version);

// appをマウント
app.mount('#app');

App.vueファイルを作成してimportし表示

<template>
  <h1>Hello World</h1>
</template>

//略
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up