如何使用vite构建一个html的项目

最新推荐文章于 2024-09-22 09:30:56 发布

八月初鹅

最新推荐文章于 2024-09-22 09:30:56 发布

阅读量493

点赞数 2

文章标签： html javascript arcgis

本文链接：https://blog.csdn.net/zn843998601/article/details/140637598

版权

使用Vite构建一个基于HTML的项目非常简单，下面是详细的步骤：

步骤 1: 创建项目目录

首先，创建一个新的目录用于你的项目：

mkdir my-vite-project
cd my-vite-project

步骤 2: 初始化项目

在新创建的目录中初始化一个新的Node.js项目：

npm init -y

步骤 3: 安装Vite

接下来，安装Vite作为开发依赖：

npm install --save-dev vite

步骤 4: 设置项目结构

Vite推荐的项目结构是将源代码放在src目录下。你可以创建以下结构：

mkdir src
touch src/index.html
touch src/main.js

`src/index.html` 文件

这是你的HTML入口文件。添加基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

注意，<script>标签中的src属性使用的是相对于根目录的路径。

`src/main.js` 文件

这是你的JavaScript入口文件，可以在这里编写你的业务逻辑：

document.addEventListener('DOMContentLoaded', () => {
    console.log('Vite is running!');
});

步骤 5: 配置Vite

在项目根目录下创建一个vite.config.js文件：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src',
  base: './',
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
  },
});

这个配置告诉Vite：

项目根目录是src。
所有静态资源的基础路径是当前目录（base: './'）。
开发服务器监听3000端口。
构建后的文件输出到dist目录。

步骤 6: 添加启动脚本

在package.json中添加启动脚本来方便开发和构建：

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

现在，你可以运行npm run dev来启动开发服务器，或者运行npm run build来构建项目。

步骤 7: 运行项目

运行开发服务器：

npm run dev

这将在本地开发服务器上启动你的应用，通常在http://localhost:3000上可访问。

这就是使用Vite构建一个基于HTML的项目的基本流程。你可以在此基础上继续添加更多的功能，如样式表、脚本库、API调用等。