vue3+webpack5+vue-i18n国际版官网，支持多国语言中英法等语言切换，暗黑明亮主题风格切换，多页面应用框架，从0-100实现详细步骤说明

国际版官网框架

vue3+webpack5打包+vue-i18n国际化语言+element-plus组件库

1. 项目结构如下：

2. 主要用webpack5玩转多页面应用框架和单页面应用框架，多页面应用框架webpack.config.js配置如下：

const path = require("path");
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {
   VueLoaderPlugin} = require('vue-loader');
const isProduction = process.env.NODE_ENV === 'production';
const {
    setEntry,setHtmlPlugin } = require('./webpack.util.js')
const {
    CleanWebpackPlugin } = require("clean-webpack-plugin");
const ESBuildPlugin = require('esbuild-webpack-plugin').default;

module.exports = () => {
   
  return {
   
    mode: isProduction ? "production" : "development",
    entry: setEntry,
    devtool: isProduction ? false : "inline-source-map",
    devServer: {
   
      open: true,
      hot: true, 
      port: 3001,
    },
    output: {
   
      path: path.resolve(__dirname, "./dist"),
      filename: "js/[name].[contenthash:10].js",
    },
    mode: isProduction ? 'production' : 'development',
    module: {
   
      rules: [
        {
   
          //.js文件loader
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
   
            loader: 'babel-loader',
            options: {
   
              cacheDirectory: true,
              cacheCompression: false
            }
          }
        },
        {
   
          //.vue文件loader
          test: /\.vue$/,
          use: 'vue-loader'   
        },
        {
   
          //.css文件loader
          test: /\.css$/,
          use: [isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', 'css-loader']
        },
        {
    //图片
          test: /\.(png|svg|jpg|jpeg|gif|bmp)$/,
          type: 'asset/resource',
          generator:{
    
              filename: 'image/[contenthash:10].[ext]',
          }, 
        },
        {
   
          test: /\.mp4$/,
          use: {
   
            loader: 'file-loader',
            options: {
   
              name: 'video/[contenthash:10].[ext]',
            },
          },
        },
      ]
    },
    resolve: {
   // 设置模块如何被解析
      alias: {
   
        vue: "vue/dist/vue.esm-bundler.js"
      },
      extensions: ['.js', '.vue']// 按顺序解析这些后缀名
    },
    optimization: {
   
      minimizer: [new ESBuildPlugin()],
      splitChunks: {
   
        cacheGroups: {
   
          defaultVendors: {
   
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'initial'
          },
          common: {
   
            name