天天综合网～永久入口,亚洲午夜精品无码专区在线观看W

Laravel + Vue 3（Vite、TypeScript）SPA 設(shè)置

2023-1-28 前端達(dá)人

在本教程中，我將向大家展示如何使用 Laravel + Vue 3 使用 typescript 和 Vite 設(shè)置你自己的單頁應(yīng)用程序。

這是在 Laravel 項目中添加 PWA 的手動方法。我們不會使用 InertiaJS 或其他類似的東西，我們也不會混合使用。我們將手動實現(xiàn)我們自己的 VueJS 前端。

第 1 步：讓我們創(chuàng)建我們的 Laravel 項目

composer create-project laravel/laravel laravel-vue-manual 


    
        1

第 2 步：設(shè)置前端

在我們的 laravel 項目中，讓我們使用 yarn 運行一個命令，并選擇 vue 和 typescript。

yarn create vite 


    
        1

將項目名稱設(shè)置為：FrontEndApp
選擇：Vue
選擇：TypeScript

然后轉(zhuǎn)到我們的FrontEndApp目錄并運行yarn或yarn install安裝依賴項。

配置 Vite

讓我們配置我們的 vite 配置FrontEndApp\vite.config.ts

import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default ({ mode }) => { // 檢查是否開發(fā) const isDevelopment = mode === "development"; return defineConfig({ server: { port: 3000, }, build: { // 生成的文件將添加到此處 outDir: "./../public/app", }, // 也將更改基于模式的基礎(chǔ) base: isDevelopment ? "/" : "/app/", plugins: [vue()], }); }; 

    




    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20

然后讓我們更改build腳本FrontEndApp\package.json，這樣每次我們構(gòu)建它時都會替換以下文件public/app：

{ ... "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build --emptyOutDir", "preview": "vite preview" }, ... } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

現(xiàn)在，如果我們在FrontEndApp中運行yarn build，它應(yīng)該在laravel項目的根目錄中的public文件夾中創(chuàng)建一個名為 app 的文件夾。

在這里插入圖片描述

第 3 步：設(shè)置 Laravel 路由

讓我們設(shè)置我們的 laravel 路由，以便我們可以訪問我們剛剛創(chuàng)建的文件。

讓我們編輯這個文件 routes\web.php

<?php

use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('welcome'); }); Route::get('/app/{any}', function () { $path = public_path('app/index.html'); abort_unless(file_exists($path), 400, 'Page is not Found!'); return file_get_contents($path); }) ->name('FrontEndApp'); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15

現(xiàn)在，如果我們http://127.0.0.1:8000/app在瀏覽器中打開，我們現(xiàn)在可以看到我們的應(yīng)用程序已啟動。

第 4 步：設(shè)置腳本

我們將在我們的根項目目錄中添加一個開發(fā)包，并同時調(diào)用它。我們用它來一次運行 2 個或更多命令。

安裝：

yarn add -D concurrently 


    
        1

如果我們想要自動工作，不想每次使用時都重新構(gòu)建frontednapp，我們要做的是在package.json項目的根目錄中添加一個新腳本。

{ ... "scripts": { ... "front:serve": "cd FrontEndApp && yarn dev", "front:build": "cd FrontEndApp && yarn build", "serve": "concurrently \"php artisan serve --port=8080\" \"yarn front:serve\"", "deploy": "yarn setup && yarn front:build && php artisan migrate" }, ... } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11