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

400 阅读2分钟

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

一:设置你的Vue.js项目

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

本地预览: dist 目录旨在由 HTTP 服务器提供服务,因此如果您直接通过 file:// 协议打开 dist/index.html 它将无法工作。 在本地预览生产版本的最简单方法是使用 Node.js 静态文件服务器,例如:

image.png CPRS:如果您的静态前端与后端 API 部署到不同的域,您将需要正确配置 CORS。

PWA:如果您使用 PWA 插件,则您的应用程序必须通过 HTTPS 提供服务,以便 Service Worker 可以正确注册。

GitHub 

  1. 在 vue.config.js 中设置正确的 publicPath。
  2. 在您的项目中,创建包含以下内容的 deploy.sh(适当地取消注释突出显示的行)并运行它以进行部署:

image.png 3. Vue CLI 将路由器添加到项目中,并使用基本路由功能自动更新项目文件。 如果您想了解更多信息,请查看官方Vue CLI 指南。

  1. 将您的项目上传到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:查看部署历史

• 点击标志返回项目列表

• 单击项目以查看详细信息

• 单击导航选项卡上的部署以查看部署历史记录 如果构建步骤失败并且构建设置需要更新,请检查项目设置。