前端打包

获得源码：

✅ 金合可视化平台前端仓库

打包

1. 根目录下安装依赖(强烈推荐使用 pnpm )

# 无法下载依赖可设置淘宝镜像
pnpm install

2. 修改根目录下.env.production配置文件

配置文件修改分为两种情况：

域名方式

局域网IP

局域网部署时，因为考虑到跨域问题，需要配置跨域代理，配置文件如下：

3. 打包

# 无法下载依赖可设置淘宝镜像
pnpm run build

打包后的成品位于根目录website目录下

部署和站点配置

1. 安装Nginx

   

2. 创建网站

   

3. 点击打开部署目录

   

4. 压缩website文件夹

   

5. 上传至宝塔并解压

   
   

6. 修改配置

   
   

记得修改IP哦

# 请将伪静态规则或自定义NGINX配置填写到此处

location / {
  # 可以将这个目录地址替换为自己的前端包所在位置
  root /www/wwwroot/192.168.2.81;
  index index.html;
}
# 分享地址
location /share {
  alias /www/wwwroot/192.168.2.81;
  index index.share.html;
}

location /datav-api/ {
  # 服务部署地址 
  proxy_pass http://192.168.2.112:8000/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header REMOTE-HOST $remote_addr;
  #持久化连接相关配置
  proxy_connect_timeout 3000s;
  proxy_read_timeout 86400s;
  proxy_send_timeout 3000s;
}

7. 访问IP或域名

   

常见问题

打包报错

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

在package.json文件中修改如下配置：

{
  ...,
  "build": "cross-env NODE_ENV=production vite build",
  ...
}

"build": "cross-env NODE_ENV=production node --max_old_space_size=4096 node_modules/vite/bin/vite.js build"