Laravel Vite 教程 - 快速上手与配置指南

Laravel Vite 教程 - 快速上手与配置指南

laravel-viteVite integration for Laravel (maintenance mode)项目地址:https://gitcode.com/gh_mirrors/la/laravel-vite

项目概述

Laravel Vite 是一个专为 Laravel 框架设计的前端构建工具集成方案，利用 Vue.js 或其他现代JavaScript库时，通过Vite实现快速的热更新和高效的开发环境搭建。本教程基于仓库 innocenzi/laravel-vite，旨在指导开发者如何理解和操作此项目。

---

1. 项目的目录结构及介绍

Laravel Vite 的项目结构在原生Laravel基础上融入了Vite的相关组件和配置。以下是一些关键目录和文件的说明：

主要目录结构

• public：存放由Vite编译后的静态资源，包括CSS、JS等。
• resources/js：放置Vue应用程序或任何JavaScript组件的主要目录。
• resources/css：存储全局CSS样式。
• vendor：第三方依赖，包括Laravel框架和Vite相关扩展包。
• package.json：定义Node.js项目的元数据，包括脚本命令、依赖项等，是Vite配置的入口点。
• vite.config.js：Vite的配置文件，用于自定义构建选项。

---

2. 项目的启动文件介绍

package.json

在项目根目录下的package.json文件中，定义了一系列npm脚本，其中最关键的是：

• "dev"：启动Vite的开发服务器，适用于开发阶段，提供实时重新加载功能。

  "scripts": {
    "dev": "vite",
    ...
  }
  

启动开发模式，你可以执行 npm run dev 命令。

.env

虽然不是直接的启动文件，但.env（可能位于项目根部）对于配置环境变量至关重要，如API基础URL或数据库连接信息等，间接影响着应用的运行。

---

3. 项目的配置文件介绍

vite.config.js

这是Vite的配置心脏，允许你定制Vite的行为。常见的配置包括：

export default defineConfig({
  server: { // 配置服务端选项
    host: 'localhost', 
    port: 3000,
  },
  build: { // 构建选项
    outDir: './public',
    target: 'esnext',
  },
  resolve: { 
    alias: { // 路径别名
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
});

• server: 控制开发服务器的行为，如监听的端口、主机地址。
• build: 有关生产环境构建的设置，包括输出目录、目标JavaScript语法版本等。
• resolve.alias: 设置模块导入的路径别名，简化导入语句。

通过以上介绍，开发者应能够理解并初步配置好Laravel Vite项目，以便进行高效前端开发工作。记得在开始之前安装所有必要的依赖项，通常通过运行 npm install 来完成。

laravel-viteVite integration for Laravel (maintenance mode)项目地址:https://gitcode.com/gh_mirrors/la/laravel-vite