教程:如何使用4EVERLAND部署一个免费去中心化VUE.JS前端项目

Vue CLI 是一个用于快速 Vue.js 开发的完整系统,旨在成为 Vue 生态系统的标准工具基线。
在本指南中,我们将介绍如何使用 4everland 部署 Vue.js 前端应用程序。

一:设置你的Vue.js项目

如果您使用 Vue CLI 和后端框架来处理作为部署一部分的静态资产,您需要做的就是确保 Vue CLI 在正确的位置生成用于构建的文件,然后按照部署说明进行操作后端框架。
如果您要与后端分开开发前端应用程序。 您可以将 dist 目录中构建的内容部署到任何静态文件服务器,但请确保设置正确的 publicPath。

本地预览: dist 目录旨在由 HTTP 服务器提供服务,因此如果您直接通过 file:// 协议打开 dist/index.html 它将无法工作。 在本地预览生产版本的最简单方法是使用 Node.js 静态文件服务器,例如:
教程:如何使用4EVERLAND部署一个免费去中心化VUE.JS前端项目_第1张图片
CPRS:如果您的静态前端与后端 API 部署到不同的域,您将需要正确配置 CORS。
PWA:如果您使用 PWA 插件,则您的应用程序必须通过 HTTPS 提供服务,以便 Service Worker 可以正确注册。

GitHub

  1. 在 vue.config.js 中设置正确的 publicPath。
  2. 在您的项目中,创建包含以下内容的 deploy.sh(适当地取消注释突出显示的行)并运行它以进行部署:
    教程:如何使用4EVERLAND部署一个免费去中心化VUE.JS前端项目_第2张图片
  3. Vue CLI 将路由器添加到项目中,并使用基本路由功能自动更新项目文件。
    如果您想了解更多信息,请查看官方Vue CLI 指南。
  4. 将您的项目上传到Github账户。

二:使用 4everland 部署您的 Vue.js 项目

要使用 4everland 部署 Vue.js 应用程序,请确保已将其推送到 GitHub 存储库。
开始部署,单击“导入”,然后选择您连接的 Git 帐户。

  1. 设置根目录
    设置根目录,大部分项目保持默认即可,monorepo可以选择一个子目录,这是运行npm install和build命令的地方。
    2:配置构建设置
    设置根目录后,应选择默认框架。框架将具有默认的构建命令和输出目录,打开覆盖以覆盖默认设置。
    3:环境变量
    如果需要,设置环境变量,可以通过代码中的 process.env.VARIABLE_NAME 访问。
    4:检查构建状态
    构建状态:
    • Created:创建一个新任务
    • Queued:任务在队列中待处理,应尽快处理
    • Running:任务正在运行
    • Sucess:所有构建步骤、部署步骤均已完成
    • Failure:构建或部署站点时出现异常/错误
    5:查看部署历史
    • 点击标志返回项目列表
    • 单击项目以查看详细信息
    • 单击导航选项卡上的部署以查看部署历史记录
    如果构建步骤失败并且构建设置需要更新,请检查项目设置。

你可能感兴趣的