Vue3+Vite部署到Netlify

前言

本项目的前端是使用Vue3技术。因为用到了Vite做代理解决跨域问题，所以部署到Netlify需要多做一些步骤。

使用Vite代理后，如果前端是在本地部署，需要添加VITE_PROXY环境变量。

例如在 .env.development 文件中添加 VITE_PROXY=[["/api/v1","https://xx.naihe.me/api/v1"],["/ws","wss://xxx.naihe.me/ws"]]

netlify使用教程

使用Netlify部署的话，需要在前端项目的根目录创建一个 netlify.toml 配置文件。

下面简要说明一下Netlify配置文件的用法：

• from: 你想重定向的大小写路径。特殊字符必须是URL编码的。
• to： 你想重定向到的URL或路径。特殊字符必须是url-encoded。
• status： 你想在重定向中使用的HTTP状态代码；默认为301。
• force（强制）： 是否覆盖路径中的任何现有内容；默认为假。请访问阴影说明以了解更多细节。
• query： 查询字符串参数，必须与重定向相匹配。请访问查询参数说明了解更多细节。
• conditions（条件）： 匹配重定向的条件，包括国家、角色和cookie存在条件。
• headers： 在代理重定向中发送的额外请求头。
• signed（签名）： 签名代理重定向的环境变量的名称。

了解语法糖后，可以看看 netlify.toml 的使用示例：

[[redirects]]
  from = "/old-path"
  to = "/new-path"
  status = 301
  force = false
  query = {path = ":path"}
  conditions = {Language = ["en"], Country = ["US"], Role = ["admin"]}

## 此规则将重定向到外部API，使用秘密对请求进行签名
[[redirects]]
  from = "/search"
  to = "https://api.mysearch.com"
  status = 200
  force = true # COMMENT: ensure that we always redirect
  headers = {X-From = "Netlify"}
  signed = "API_SIGNATURE_TOKEN"

部署过程及踩坑

在本项目中，配置的netlify.toml 如下：

[[redirects]]
  from = "/api/*"
  to = "https://xxx.naihe.me/api/:splat"
  status = 200
  force = true

使用起来很简单也易上手。在使用过程中，我发现在netlify.toml 的 redirects 不能使用环境变量。还有不能重写websocket协议，也就是说只能重写http和https协议。

部署方式有三种：在线存储库 GitHub、Gitlab等、网站模板和手动上传方式。

本次部署采用手动上传方式，部署过于简单，下面采用文字简要描述。

部署步骤 Team overview -> Add new site -> Deploy manually -> Drag and drop your site output folder here Or, browse to upload

上传选择 Vue Build 生成的 dist 文件夹，上传完毕后会跳转到部署好的网站控制面板