Vue3+Vite部署到Netlify

发布时间 2023-05-22 16:50:59作者: Naihe\

本项目的前端是使用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.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中只有在 build.command能使用环境变量。还有对wss协议的链接不能重写,也就是说只能重写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 文件夹,上传完毕会跳转到 控制面板

image-20230522163810525

参考官方教程:
https://docs.netlify.com/routing/redirects/
https://docs.netlify.com/configure-builds/environment-variables/
https://docs.netlify.com/configure-builds/file-based-configuration/?#redirects