B/S项目如何上线？前端如何打包

B/S项目上线

1.上线准备

上线:指的是将项目部署到互联网平台，通过外网可访问项目。

需要做的工作:代码环境配置、网络服务配置。

网络服务或云服务一般是运维方面负责，对于开发人员来说主要是代码环境相关准备。

2.前后端分工

后端:根据开发语言的不同，需要配置http服务及数据库环境

前端:如果由框架（Vue或React等），需要打包项目，并且配置相关的生产环境

下面以前端框架为例，详说上线流程

3.项目打包(vite为例)

3.1打包前

本地环境代理服务器配置

因为跨域问题，前端项目可能在本地环境下配置了跨域，在打包应用程序之前，应该移除或注释掉proxy配置，确保生产环境直接通过正确的API端点进行请求。如果你的项目中有多个环境的配置文件（例如.env文件），确保在相关的环境变量中也不包含指向代理服务器的信息。

#在.env文件配置中
#.env.development 表示配置开发环境    
#.env.production 表示配置生产环境  
#端口
VITE_PORT = 8100
#BASE_api 
VITE_APP_BASE_API = 'api/'

在打包时（生产环境），系统会自动找到.env.production中的配置，开发环境时，系统会自动找到.env.development中的配置，注意指向的接口地址配置 。

由于配置不一样，所以在封装http服务时，注意引入

const service = axios.create({
  // 默认请求地址，根据环境的不同可在.env 文件中进行修改
  // .env 文件中定义的环境变量可以通过 import.meta.env 访问。
  baseURL: import.meta.env.VITE_APP_BASE_API,
})
//解释说明import.meta
import.meta是ES6模块标准中的一个新特性，是只读对象，包含属性：
import.meta.url ：当前模块的 URL，可以用来获取当前模块的绝对路径。
import.meta.scriptElement ：\<script> 标签元素
import.meta.env：当前模块的环境变量，可以获取.env文件中定义的变量值

3.2 打包

不同的构建工具，不同的命令，一般主流webpack或vite。根据对应的命令打包即可

#webpack  根据webpack配置要求配置即可
#vite
yarn run build
npm run build

3.3 上线

打包后会生成dist文件夹，将这个文件夹部署到对应的服务器中即可

当然，ngnix需要配置，一般运维人员完成，具体也可查看ngnix配置步骤