Vite 常规配置

最新推荐文章于 2024-08-22 14:21:56 发布
最新推荐文章于 2024-08-22 14:21:56 发布
阅读量3.4k 收藏 6
点赞数 6
分类专栏： vite 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UserLiangjia/article/details/132845392
版权

九、Vite 常规配置

在 Vite 的常规配置中，我会讲到以下几个方面的配置

  • Vite 开发服务器配置
  • Vite 代理服务配置
  • Vite 中如何配置别名路径
  • Vite 中如何配置多入口，进行多页面开发
  • Vite 中如何配置打包后资源分类存放到对应文件夹

1、Vite 开发服务器配置

当我执行npx vite或npx run vite命令时，会启动一个开发服务。Vite 提供了相关的配置允许更改服务的主机，端口等。

通过修改vite.config.js文件导出对象的server选项中来配置。

具体如下：

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    port: 8880, // 自定义端口，默认为5173
    open: true, // 服务启动后，自动在浏览器中打开，默认是不打开的
    hmr: true, // 为开发服务启用热更新，默认是不启用热更新的
  },
});

更多配置：查阅 Vite 官方文档 - 开发服务选项配置(opens new window)

代码演示

  • 新建index.html文件，内容如下
<script type="module" src="./index.js"></script>
  • 新建index.js文件，内容如下：
console.log("Hello Vite");
  • 在根目下，新建vite.config.js文件，内容同上。

注：

最后，我执行npx vite来启动服务，会自动在浏览器打开"http://127.0.0.1:8880"地址访问服务。

接下来，我把index.js中的内容改为console.log("Hello HMR")同时保存，发现浏览器控台输出内容自动更新为“Hello HMR"（本质是启用了热更新）

2、Vite 代理服务配置

当我在项目中利用Ajax向服务端发请求时，会遇到跨域的限制。

为了能让请求成功，我通常会在请求和真实服务之间架设一个代理服务。代理服务再向真实服务器发请求拿到数据并返回给到客户端。

在这里插入图片描述

Vite 允许我为开发服务配置自定义代理规则，我只需要在server.proxy选项下进行相关配置就可。

server.proxy 配置

import { defineConfig } from 'vite'

export default defineConfig({
    server:{
        proxy:{
            // /api是字符串 http://localhost:5173/api 的简写法
            // 以下表示，当我向 http://localhost:5173/api地址及下级路径发请求时，帮我转发到`http://127.0.0.1:8990/api`地址及对应的下级路径发请求
            // http://localhost:5173/api --> http://127.0.0.1:8990/api
            // http://localhost:5173/api/menu --> http://127.0.0.1:8990/api/menu
            "/api":"http://127.0.0.1:8990/api
            //
        }
    }

})

2.1、代码演示 -（项目结构）

我利用node来搭建两个请求数据的服务

  • http://127.0.0.1:8990/api/menu 获取菜单数据
  • http://127.0.0.1:8990/api/course 获取课程数据

然后在 Vite 项目中，利用axios向上面两个地址发送请求来获取数据。

因为受到跨域限制，所以我需要设置开发服务的代理服务，利用代理服务帮帮我拿到数据并转发给我。

整体项目目录结构如下

vite
├─ data   // JSON数据，node服务会读取JSON文件中内容，然后返回给客户端
│  ├─ blog.json
│  └─ menu.json
├─ index.html  // Vite 项目的入口文件
├─ index.js  // 文件中会利用axios向服务端发请求获取数据
├─ node-api.js  // 搭建node服务，返回JSON数据
├─ package-lock.json
├─ package.json
└─ vite.config.js  // 配置文件

2.2、代码演示 - 搭建 node 服务

  • node-api.js文件内容如下 ：
const http = require("http"); // 加载http模块,用来创建http服务
const fs = require("fs"); // 加载fs模块，用来操作文件

// 创建http服务，req请求对象   res响应对象
http
  .createServer((req, res) => {
    // 获取请求地址主机端口后地址
    const url = req.url;
    // 设置响应头，响应的数据类型
    res.writeHead(200, {
      "Content-Type": "application/json",
    });

    // 请求地址拦截
    if (url === "/api/menu") {
      // 读取JSON文件中数据，并响应到客户端
      const data = fs.readFileSync("./data/menu.json", "utf-8");
      res.end(data);
    } else if (url === "/api/blog") {
      const data = fs.readFileSync("./data/blog.json", "utf-8");
      res.end(data);
    } else {
      res.end("Hello Node");
    }
  })
  .listen("8990"); // 设置端口号

// 服务器正常启动，打印下面这句话作为提示
console.log("Server running at http://127.0.0.1:8990");
  • data 文件夹中blog.json和menu.json文件，内容如下
{
    "code": "0000",
    "data": [
      {
        "blogName": "vite下一代的前端工具链",
        "imageUrl": "https://img-blog.csdnimg.cn/8441a1c7b63b4e60abebafecea16e16a.png",
        "desc": "CSS 的默认处理行为CSS 模块化处理CSS 预处理器CSS 兼容性处理限定大小的图片转为 Base64 编码JSON 的导入JSON 支持具名导入"
      },
      {
        "blogName": "Vite静态资源处理",
        "imageUrl": "https://img-blog.csdnimg.cn/8441a1c7b63b4e60abebafecea16e16a.png",
        "desc": "Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验，其最大的特点就是快 ！"
      }
    ],
    "message": "成功"
  }
{
  "code": "0000",
  "data": [
    {
      "category_id": 1001,
      "title": "人气 TOP"
    },
    {
      "category_id": 1002,
      "title": "爆款套餐"
    },
    {
      "category_id": 1003,
      "title": "咖啡"
    },
    {
      "category_id": 1004,
      "title": "奶茶"
    },
    {
      "category_id": 1005,
      "title": "甜品小点"
    }
  ],
  "message": "成功"
}

注：

以上文件创建好后，只需要 Vite 目录执行node node-api.js就可以启动node服务。

访问http://127.0.0.1:8990/api/menu 和http://127.0.0.1:8990/api/blog 地址，可以查看到返回的 JSON 字符串。

如下：

在这里插入图片描述

2.3、代码演示 - 搭建 Vite 项目

  • index.html文件内容如下
<script type="module" src="./index.js"></script>
  • index.js文件内容如下
import axios from "axios";
// 向 http://localhost:5173/api/menu 发请求,因为设置了代理，代理转发向http://127.0.0.1:8990/api/menu 发请求
axios.get("/api/menu").then((res) => {
  console.log(res.data.data);
});

// 向 http://localhost:5173/api/course 发请求 因为设置了代理，代理转发向http://127.0.0.1:8990/api/course 发请求
axios.get("/api/course").then((res) => {
  console.log(res.data);
});
  • vite.config.js配置文件内如下
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    proxy: {
      "/api": "http://127.0.0.1:8990",
    },
  },
});

注：

最后执行npx vite启动开发服务，访问http://localhost:5173/地址，可以看到控制台正常打印了请求到的内容。

如果我把配置文件中内容去掉，就会出现报错。

在这里插入图片描述

3、Vite 中如何配置别名路径

  • 当我在访问静态资源时，如果书写的路径非常长，那每次书写时就会非常麻烦。
  • 如果能把相同部分的路径用别名代替，那我在书写路径时只需要书写别名+不同的路径部分就好了。

我可以在vite的配置文件中， 为文件系统路径配置别名，如下：

import { defineConfig } from 'vite'
export default defineConfig({
    resolve:{
        alias:{
            /*
            	@js 为 路径 /src/assets/js 的别名
            	导入JS：  import { username }  from "/src/assets/js/basic.js"
            	可简写成： import { username } from "@js/basic.js"
            */
          "@js":"/src/assets/js",
    }

})

注意事项

  • 当使用文件系统路径的别名时，请始终使用绝对路径，相对路径的别名值会原封不动地被使用，因此无法被正常解析。
  • 在index.html项目入口文件中不要使用别名加载文件，因为启动开发服务并不会对源码

3.2、代码演示：为路径配置别名

  • 新建项目目录结构如下：
vite
├─ index.html
├─ package-lock.json
├─ package.json
├─ src
│  └─ assets
│     ├─ css
│     │  └─ index.css
│     ├─ images
│     │  └─ a.jpg
│     └─ js
│        ├─ basic.js
│        └─ index.js
└─ vite.config.js
  • index.html文件内容如下：
<script type="module" src="/src/assets/js/index.js"></script>

在index.html文件加载的 JS 和 CSS，不要使用别名，因为在开发服务下，并不会去解析别名，所以会出现找不到资源的 404 错误。

  • css/index.css内容如下:
body {
  background-color: skyblue;
}
  • js/index.js与js/basic.js内容如下:
// js/index.js
import "@css/index.css";
import url from "@images/a.jpg";
import { username } from "@js/basic.js";

document.body.innerHTML = ` <img src="${url}" />---- ${username}`;

// js/basic.js
export const username = "艾编程";
  • vite.config.js文件内容如下
import { defineConfig } from 'vite'
export default defineConfig({
    resolve:{
        alias:{
          "@images":"/src/assets/images",
          "@js":"/src/assets/js",
          "@css":"/src/assets/css",
        }
    }

})


// 或下面写法
import { defineConfig } from 'vite'
import { resolve } from 'path';
export default defineConfig({
    resolve:{
        alias:{
          "@images":resolve(__dirname,"src/assets/images"),
          "@js":resolve(__dirname,"src/assets/js"),
          "@css":resolve(__dirname,"src/assets/css"),
        }
    }

})

最后，执行npx vite，在浏览器中可以访问到如下效果，说明配置生效了。

在这里插入图片描述

4、vite 中如何配置多入口，进行多页面开发

  • Vite 在开发环境下默认是多入口开发的
  • 在生产环境下，如果想要多入口开发，需要额外的配置。
  • Vite 在生产环境下是利用rollup来实现打包，所以我需要对rollup的打包入口进行配置。

生产环境下多入口打包配置如下

import { defineConfig } from "vite";
import { resolve } from "path";
export default defineConfig({
  // 生产环境下打包配置在build选项中配置
  build: {
    // rollup 相关配置在rollupOptions选项中配置
    rollupOptions: {
      // 打包入口，以下是多入口
      input: {
        index: resolve(__dirname, "index.html"),
        app: resolve(__dirname, "app.html"),
      },
    },
  },
});

代码演示

  • 新建项目录如下
vite
├─ app.html
├─ index.html
├─ package-lock.json
├─ package.json
├─ src
│  └─ assets
│     ├─ css
│     │  ├─ app.css
│     │  └─ index.css
│     ├─ images
│     │  ├─ app.jpg
│     │  └─ index.jpg
│     └─ js
│        ├─ app.js
│        └─ index.js
└─ vite.config.js
  • app.html和index.html内容如下
<!--app.html内容-->
<script type="module" src="/src/assets/js/app.js"></script>

<!--index.html内容-->
<script type="module" src="/src/assets/js/index.js"></script>
  • app.js和index.js内容如下
// app.js 内容
import "/src/assets/css/app.css";
import url from "/src/assets/images/app.jpg";
document.body.innerHTML = `<img src="${url}" />`;

// index.js
import "/src/assets/css/index.css";
import url from "/src/assets/images/index.jpg";
document.body.innerHTML = `<img src="${url}" />`;
  • app.css和 index.css内容如下
/* app.css */
body {
  background-color: skyblue;
}

/* index.css */
body {
  background-color: red;
}
  • vite.config.js文件中配置同上

执行npx vite build打包，然后执行npx vite preview预览打包的项目，按我预期显示以下内容

在这里插入图片描述

接下来，我看下生成的dist目录下的文件，其结构如下。

dist
├─ app.html
├─ assets
│  ├─ app-632f0828.js
│  ├─ app-8cce9ece.jpg
│  ├─ app-d0983e99.css
│  ├─ index-244a1ddb.jpg
│  ├─ index-28a21df5.css
│  ├─ index-f029a56b.js
│  └─ modulepreload-polyfill-3cfb730f.js  // 自动注入的 模块预加载 polyfill
└─ index.html

注：

观察上面，发现所有资源文件全部打包后放在了dist/assets目录下，如果我想按文件类型，将 JS、CSS、Images 分别放到 JS、CSS、Images 文件夹，还需要我做额外配置。

modulepreload模块预加载：可以预加载原生模块，保证某些文件可以不必等到执行时才加载

5、Vite 打包后资源分类存到对应文件夹

针对上面项目，如果我想按文件类型，将 JS、CSS、Images 分别放到 JS、CSS、Images 文件夹。

可以做如下配置

import { defineConfig } from "vite";
import { resolve } from "path";

export default defineConfig({
  build: {
    rollupOptions: {
      // 打包输出路径,默认是dist/assets,以下相当于dist/static
      assetsDir: "static",
      // 打包入口，以下是多入口
      input: {
        index: resolve(__dirname, "index.html"),
        app: resolve(__dirname, "app.html"),
      },
      // 出口设置
      output: {
        // 入口文件中JS输出地址
        entryFileNames: "static/js/[name]-[hash].js",
        // 对代码分割中产生的 chunk 自定义命名
        chunkFileNames: "static/chunk/[name]-[hash].js",
        // 资源出口路径(如：图片、css等)
        assetFileNames: function (assetInfo) {
          const name = assetInfo.name;
          if (/.css$/.test(name)) {
            return "static/css/[name]-[hash].[ext]";
          } else if (/.[jpe?g|png|gif]$/.test(name)) {
            return "static/images/[name]-[hash].[ext]";
          } else {
            return "static/[ext]/[name]-[hash].[ext]";
          }
        },
      },
    },
  },
});

执行npx vite build打包后，生成的dist目录结构如下

dist
├─ app.html
├─ index.html
└─ static
   ├─ css
   │  ├─ app-d0983e99.css
   │  └─ index-28a21df5.css
   ├─ images
   │  ├─ app-8cce9ece.jpg
   │  └─ index-244a1ddb.jpg
   ├─ js
   │  ├─ app-0e78e232.js
   │  └─ index-8695444c.js
   └─ chunk
      └─ modulepreload-polyfill-3cfb730f.js

关于 rollup 更多配置，大家可以参考 [rollup 官网的配置选项(opens new window)](

xunyu0406
关注
专栏目录
十二、vite配置详解
张先森的博客
08-25 1万+
vite配置详解
vite常用配置
weixin_63443072的博客
10-16 7232
root 是项目根路径，可以是绝对路径，一般配合fs.strict来限制访问root以外的路径。
vite里的Rollup打包配置
最新发布
青蛙king的博客
08-22 2048
在使用 vite 配置其 build 属性时，我们可以通过 build.rollupOptions 来自定义底层的 Rollup 打包配置（
vite配置
qq_47040462的博客
07-03 2258
主要配置有：root(源文件路径)、define（全局常量）、resolve（模块解析）、base(静态文件路径)等。以下也是常用的配置（实际根据具体项目而定）
vite基本配置
weixin_45732091的博客
07-18 670
vite.config.js基本配置。
Vite的常见配置选项
m0_46543935的博客
07-16 2102
vite defineConfig Options 说明
vite.config.ts常规配置（publicPath）
shengzz的博客
04-02 1万+
publicPath，base属性，vite配置
NestJS、Vite 和 esbuild 入门
分享身边生活经验blog
10-01 1841
NestJS 是一个 Node.js 框架，用于构建高效且可扩展的企业服务器端/后端应用程序。根据文档，它支持 JavaScript 和 TypeScript 的所有最新 ECMAScript 版本。NestJS 结合了众所周知的 OOP、函数式编程和函数式反应式编程的编程概念和哲学，以解决后端应用程序设计中的架构挑战，这些应用程序可扩展、可维护、易于测试且不紧密耦合在一起。
基于 vue3 + vite + element plus + avue3 + vue-router + vuex，适配手机、平
06-08
2. 配置文件：如vite.config.js（Vite的配置文件），vue.config.js（Vue CLI的配置文件，虽然这里使用Vite但可能存在遗留）。 3. 主入口文件：如main.js或app.vue，用于初始化Vue实例和设置全局配置。 4. HTML模板：...
基于vite+vue3的OA办公系统.zip
01-02
4. ` vite.config.js` 或 `vue.config.js`：Vite或Vue CLI的配置文件，用于自定义项目构建和开发环境的设置。 5. `.gitignore`：指定版本控制系统忽略的文件和目录。 6. `README.md`：项目说明文档，可能包含项目...
Electron+Vue3+Vite+ElectronForge整合 - 一键启动两个服务 & 一键打包两个服务
northcastle的博客
04-30 2153
electron + vue3 + vite + electron-forge 实现一键启动 & 一键打包功能
Vite 配置：这些配置日常开发够用了！
一只小松鼠_的博客
02-26 1729
相信大部分兄弟都体验过Vite了，都知道它很快。在学习的时候，官网上的各种配置也是看的眼花缭乱，不知道哪些是必要掌握的。为了提高效率，我把常用的一些配置梳理一下，希望对大家有所帮助。
vite基本配置教程
热门推荐
夏天的博客
10-14 2万+
最近做项目要求将webpack打包方式换成vite，下面将详细讲解一下配置vite需要改动的东西，以及踩的坑。vite官网：https://vitejs.cn。
vite开发服务器server选项配置（2024-05-29）
hap1994的博客
05-29 3270
这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下，非常有用。是一个高级选项，只在客户端的情况下覆盖端口，这允许你为 websocket 提供不同的端口，而并非在客户端代码中查找。注意：如果端口已经被使用，Vite 会自动尝试下一个可用的端口，所以这可能不是开发服务器最终监听的实际端口。来禁用此行为，或者为了获得完全的控制，可以传递一个函数，该函数接受源路径和 sourcemap 的路径，并返回是否忽略源路径。时，浏览器使用 DNS 来解析地址，这个地址可能与 Vite 正在监听的地址不同。
vite项目相关基础配置
weixin_47278755的博客
04-10 905
vite基础配置
Vite基本配置
grx1125的博客
03-24 3651
vite的基本配置，包含vite背后帮我们构建的一些插件、构建的部分原理。
vite配置(一)
菜鸟先飞
04-04 781
vite配置项第一部分
vite如何配置呢
05-30
Vite是一个基于ES modules的前端构建工具，它借助ES modules的特性来实现了快速的开发和热重载，同时它的配置也非常简单。 以下是Vite的配置方法： 1. 安装Vite 在项目根目录下使用npm安装Vite： ``` npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值