Vite 打包多语言与多入口配置

在前端开发中，尤其是国际化的项目，常常需要支持多语言并配置多个入口。Vite 作为现代化的前端构建工具，提供了极高的灵活性和性能支持，能够非常方便地实现多语言和多入口的配置。本文将详细介绍如何在 Vite 中配置多语言和多入口。例如 xxx.com/、xxx.com/en-us/等。

一、项目需求
二、安装和初始化 Vite 项目
三、配置多入口
四、路由配置
五、nginx 配置
六、构建部署和测试

一、项目需求

假设我们有一个支持多语言的网站，需要根据用户的语言自动加载不同的入口。我们可以通过 Vite 来实现以下功能：

假设支持 en-us（英文）和 zh-cn（中文）两种语言。
配置多个入口文件（每一种语言拥有单独的入口html）。
根据不同的语言动态加载相应的资源文件。

二、安装和初始化 Vite 项目

首先，创建一个新的 Vite 项目并初始化基本配置。

选择一个适合的模板，如 Vue、React 或 Vanilla 项目，之后安装所需的依赖。

npm create vite@latest my-multi-language-project
cd my-multi-language-project
npm install

多语言相关配置这里不做讲述主流的可以用（i18n）

三、配置多入口

Vite 允许你为多个页面配置不同的入口。我们可以通过在 vite.config.js 中配置 build.rollupOptions.input 来设置多个入口。
1. 修改 Vite 配置
在 vite.config.js 中，我们可以为多个页面设置入口配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        "zh-cn": path.resolve(__dirname, 'index.html'),
        "en-us": path.resolve(__dirname, 'en-us.html')
      }
    }
  }
})

创建多个 HTML 文件
根据我们的需求，默认语言入口是 index.html，英文入口是 en-us.html。我们需要创建这两个 HTML 文件：

public/
– index.html
– products.html

每个 HTML 文件可以引入不同的脚本和样式表，确保页面有独立的入口。

四、路由配置

以vue3 为例

import {createRouter, RouteRecordRaw, createWebHistory} from "vue-router";
const routes: RouteRecordRaw[] = [
  {
    path: "/:lang?", // 动态语言参数，`?` 表示可选
    children: [
      {path: "", component: () => import("@/views/home/index.vue")}, // 默认首页
      {path: "news-list", component: () => import("@/views/newsList/index.vue")}, // 新闻页
    ]
  }
];
const router = createRouter({
  history: createWebHistory(), // 使用history路由模式
  routes
});
router.beforeEach((_to, _from, next) => {
  next();
});
export default router;

注意：路由跳转时在需要跳转的地方，使用 router.push 并动态添加语言前缀：

  const lang = xxx; // 获取当前语言
  const path = '/news-list'
  router.push(`/ ${lang}$ {path}`); // 动态添加语言前缀

五、nginx 配置

为了实现 xxx.com/、xxx.com/en-us/ 的路由结构，需要在服务器端配置location。

server {
  location / {
    try_files  $uri$ uri/ /index.html;
  }

  location /en-us {
    try_files  $uri$ uri/ /en-us/index.html;
  }
}

六、构建部署和测试

npm run build

分别访问 xxx.com/、xxx.com/en-us/

打赏赞(1)