WSL-Ubuntu安裝Laravel心得

先決條件

可以先參考”WSL-Ubuntu安裝LAMP包含Composer”
PHP使用版本為8.1

安裝Node和NPM

https://nodejs.org/en/download
下載”node-v18.15.0-linux-x64.tar.xz”

解壓:

$ tar -xvf node-v18.15.0-linux-x64.tar.xz

查看路徑:

cd node-v18.15.0-linux-x64/bin
/node-v18.15.0-linux-x64/bin$ pwd
/.../node-v18.15.0-linux-x64/bin

軟連接，將node和npm設置為全域可以使用

sudo ln -s /.../node-v18.15.0-linux-x64/bin/node /usr/local/bin/node
sudo ln -s /.../node-v18.15.0-linux-x64/bin/npm /usr/local/bin/npm

重啟”WSL”
Win命令提示字元內 輸入:

wsl --shutdown

查看版本node

wsl:~$ node -v

查看版本npm

wsl:~$ npm -v

說明

Laravel 是一個具有表現力和優雅語法的PHP Web框架

使用Composer安裝Laravel

通過以下命令全局安裝Laravel

composer global require laravel/installer

WSL添加環境變量到” ~/.bashrc”最後

# 添加環境變量
export PATH="~/.config/composer/vendor/laravel/installer/bin:$PATH"

創建新的 Laravel 項目

laravel new laravelfirst

或是利用Composer create-project 命令指定版本

composer create-project laravel/laravel:^9 laravelfirst

使用Laravel的Artisan CLI serve命令啟動Laravel本地開發服務器

# 進入Laravel文件夾
cd laravelfirst
# 瀏覽器中訪問 http://localhost:8000
php artisan serve
# 瀏覽器中訪問 http://localhost:3000
php artisan serve --port=3000

MySQL資料庫遷移

更新.env 配置檔以使用 Laravel的mysql資料庫驅動程式

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravelfirst
DB_USERNAME=test_user
DB_PASSWORD=test

開啟MySQL

sudo mysql

創建新數據庫

CREATE DATABASE laravelfirst;

授予該用戶test_database數據庫的權限, 同時防止該用戶在服務器上創建或修改其他數據庫

GRANT ALL ON laravelfirst.* TO 'test_user'@'%';

退出MySQL

exit

執行應用程式的資料庫遷移，這將建立應用程式的資料庫表:

php artisan migrate

查看運行哪些遷移命令:

php artisan migrate:status

Laravel Breeze安裝

使用 Composer 安裝 Laravel Breeze

composer require laravel/breeze --dev
# 或指定版本
composer require laravel/breeze:1.11.4 --dev

# 以下3種方式都可以
# 1) 使用 Laravel Breeze 內建的 Blade
php artisan breeze:install
# 2) 使用 Laravel Breeze 通過 Inertia 前端實現提供 Vue
php artisan breeze:install vue
# 3) 使用 Laravel Breeze 通過 Inertia 前端實現提供 React
php artisan breeze:install react

php artisan migrate
npm install
npm run dev

# 測試可以使用"php artisan serve"比較不會有權限和Apache2設定問題
php artisan serve

如果出現以下錯誤, 為無法安裝對應版本

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vite@4.2.1
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.0.0" from the root project

方法1) 修改”package.json”中的vite版本^4.0.0改成^3.0.0"

"vite": "^3.0.0",

然後在執行一次”php artisan breeze:install vue”

php artisan breeze:install vue
npm install
npm run dev
# 測試可以使用"php artisan serve"比較不會有權限和Apache2設定問題
php artisan serve

方法2) 先使用繞過對應版本安裝升級

npm update --legacy-peer-deps

修改”package-lock.json”文件中vite版本過低位置”^3.0.0”改成”^4.0.0”

"node_modules/@vitejs/plugin-vue": {
    "version": "3.2.0",
    "peerDependencies": {
        "vite": "^4.0.0",
        "vue": "^3.2.25"
    }
},

然後在執行一次”php artisan breeze:install vue”

php artisan breeze:install vue
npm install
npm run dev
# 測試可以使用"php artisan serve"比較不會有權限和Apache2設定問題
php artisan serve

本篇完成>.<