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

一、原因

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

注：如果前端三个项目请求同一个后端域名，但是前端项目和后端项目域名不同，导致跨域，可以收到响应体信息，但是响应头返回的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 命令进行构建。