前端多个项目放在一个域名下如何配置打包文件

一、原因

        当前端有三个项目，比如，大学生后台管理系统、大学生手机端网页、大学生电脑端网页，这三个项目想放在同一个域名下，此时就需要对项目打包配置进行更改，才能实现。

注：如果前端三个项目请求同一个后端域名，但是前端项目和后端项目域名不同，导致跨域，可以收到响应体信息，但是响应头返回的token无法获取，可以用nginx解决。

二、实现

1.服务器下新建三个文件夹

在域名下新建三个文件夹，eg :  manager、app、pc

访问方式：访问项目链接的时候，要加上这个文件夹名字:https://www.a.com:8080/app

2.打包配置

①vue3(vite)有两种配置方法

方法一， vite.config.js 文件配置如下：

import { defineConfig, loadEnv } from "vite";
import { resolve } from "path";
import createVitePlugins from "./vite";

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    base: "./", // 开发或生产环境服务的公共基础路径
    envDir: "vite-env",
    plugins: createVitePlugins(env, command === "build"),
    css: {
      preprocessorOptions: {
        less: {
          additionalData: '@import "./src/styles/common.less";'
        }
      }
    },

    resolve: {
      alias: {
        // 设置路径
        "@": resolve("./src"),
        // 设置别名
        "~@": resolve("./src"),
      },
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
    },

    build: {
      outDir: "dist",
      minify: "terser", // esbuild 打包更快，但是不能去除 console.log，去除 console 使用 terser 模式
      rollupOptions: {
        output: {
          chunkFileNames: "js/[name]-[hash].js", // 引入文件名的名称
          entryFileNames: "js/[name]-[hash].js", // 包的入口文件名称
          assetFileNames: "[ext]/[name]-[hash].[ext]", // 资源文件像 字体，图片等
        },
      },
    },
  };
});

方法二， vite.config.js 文件配置如下：

import type { UserConfig, ConfigEnv } from 'vite';
import { defineConfig } from 'vite'
import { resolve } from "path";

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  return {
    publicDir: "public",
    base: "/manager/",//将manager换成你的在域名下起的放这个项目的文件夹的名字
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"),
        "components": resolve(__dirname, "./src/components"),
        "api": resolve(__dirname, "./src/api"),
      },
    },
    build: {
      outDir: 'dist',
      commonjsOptions: {
        include: [
          /node_modules/, 
        ],
      },
    },

  }

})

②react(webpack)两种系统两种方法

Windows 系统：

更改 package.json 的打包配置：

 "scripts": {
    "build": "set PUBLIC_URL=/manager&& react-scripts build", 
  }

这个是打包项目的配置，set 是一个命令，在 Windows 系统的命令提示符（CMD）或 PowerShell 里，set 命令用于设置环境变量。环境变量是操作系统中存储的一些值，这些值可以被运行在系统中的各种程序访问和使用。在这个命令中，set PUBLIC_URL=/manager 这部分将名为 PUBLIC_URL 的环境变量设置为 /manager。

之后的 && 是逻辑与运算符，它的作用是当 set PUBLIC_URL=/manager 命令成功执行后，才会接着执行 react-scripts build 命令。

react-scripts build 是创建 React 应用（Create React App）中用于构建生产版本的命令。在构建过程中，React 应用会读取 PUBLIC_URL 环境变量的值，然后根据这个值来确定静态资源（如 CSS、JavaScript 文件等）的公共路径。

注：react打包配置后，放在企业微信自建应用，在点击页面刷新时会导致路由路径丢失 /manager，强制加上也无效，小编暂时没有找到解决办法，如果你有解决办法，希望可以在评论区告知，谢谢。

Unix/Linux 系统：

"scripts": {
   "build": "PUBLIC_URL=/manager react-scripts build"
}

这里直接在命令前设置环境变量 PUBLIC_URL=/manager，这种方式同样可以把 PUBLIC_URL 环境变量的值设置为 /manager，然后再执行 react-scripts build 命令进行构建。