部署

修改 env.production

properties

# 根路径 需要部署到非根路径需要修改这里 必须以/结尾 如/dev/ /test/
VITE_BASE=/

# 是否开启压缩，可以设置为 none, brotli, gzip
VITE_COMPRESS=gzip

# 是否开启 PWA
VITE_PWA=false

# vue-router 的模式 history | hash
VITE_ROUTER_HISTORY=history

# 是否注入全局loading
VITE_INJECT_APP_LOADING=true
# 打包后是否生成dist.zip
VITE_ARCHIVER=true

# 后台请求路径 具体在vite.config.mts配置代理
VITE_GLOB_API_URL=/prod-api
# 全局加密开关(即开启了加解密功能才会生效 不是全部接口加密 需要和后端对应)
VITE_GLOB_ENABLE_ENCRYPT=true
# RSA公钥 请求加密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
VITE_GLOB_RSA_PUBLIC_KEY=
# RSA私钥 响应解密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
VITE_GLOB_RSA_PRIVATE_KEY=
# 客户端id
VITE_GLOB_APP_CLIENT_ID=
# 开启WEBSOCKET
VITE_GLOB_WEBSOCKET_ENABLE=false

VITE_BASE控制前端部署路径，默认是/，如果你的前端部署在子路径下，比如http://www.example.com/my-app，则需要修改为/my-app/。否则会出现 404 问题

VITE_COMPRESS开启压缩, brotli需要服务端支持(nginx 模块)

打包

进入项目根目录(非 antd 根目录) 执行

pnpm build:antd

/apps/web-antd/dist 目录下生成生产环境代码

nginx 配置 (重要)

传统部署如果控制台出现Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.并且页面白屏可参考

修改你的 nginx 配置文件 nginx.conf

nginx

http {
    types {
      application/javascript  js mjs;
      text/css                css;
      text/html               html;
    }
}

然后重启 nginx

部署

根目录下部署大同小异, 非根目录需要做一些配置比如部署在/test下

nginx 配置

nginx

server {
    listen       80;
    server_name  localhost;
    location /test {
      # 不缓存html，防止程序更新后缓存继续生效
      if ($request_filename ~* .*\.(?:htm|html)$) {
        add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
        access_log on;
      }
      # 这里是vue打包文件dist内的文件的存放路径
      alias   /srv/www/project/;
      index index.html index.htm;
      try_files $uri $uri/ /test/index.html;
    }
}

注意事项有三点:

使用 alias 替代 root
try_files 也要加上子路径
location 最后默认的/不要忘了
location /test 后面不需要加/

如果使用vue-router的 hash 模式, 则不需要添加try_files

关于打包文件过大

由于使用的是本地 tinymce(public/tinymce 下), 打包后的文件会比较大, 可以考虑使用 cdn 方案将 timymce 放至 cdn 上

修改: apps\web-antd\src\components\tinymce\src\editor.vue

/**
 * https://www.jianshu.com/p/59a9c3802443
 * 使用自托管方案（本地）代替cdn  没有key的限制
 * 注意publicPath要以/结尾
 */
const tinymceScriptSrc =
  import.meta.env.VITE_PUBLIC_PATH + "tinymce/tinymce.min.js";

修改为 cdn 地址即可

详见: 通过 jsDelivr + Github 实现免费 CDN (静态资源)加速

部署 ​

修改 env.production ​

打包 ​

nginx 配置 (重要) ​

部署 ​

关于打包文件过大 ​

部署

修改 env.production

打包

nginx 配置 (重要)

部署

关于打包文件过大