部署

修改 env.production

properties

# 部署根路径
VITE_PUBLIC_PATH = /

# 是否开启压缩 需要nginx支持
# 可选gzip brotli 也可共存 'brotli,gzip'
VITE_BUILD_COMPRESS = 'gzip'

# 是否删除所有的console.xx 和 debugger production模式才会生效
VITE_DROP_CONSOLE = true

# 后端路径
VITE_GLOB_API_URL=/prod-api

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

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

VITE_DROP_CONSOLE删除所有的console.xx和debugger语句，生产模式才会生效

打包

运行pnpm run build打包生产环境代码

pnpm run build

dist 目录下生成生产环境代码

部署

根目录下部署大同小异, 非根目录需要做一些配置比如部署在/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 上

修改: 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 ​

打包 ​

部署 ​

关于打包文件过大 ​

部署

修改 env.production

打包

部署

关于打包文件过大