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

Vue CLI 是一个用于快速 Vue.js 开发的完整系统，旨在成为 Vue 生态系统的标准工具基线。
在本指南中，我们将介绍如何使用 4everland 部署 Vue.js 前端应用程序。
一：设置你的Vue.js项目如果您使用 Vue CLI 和后端框架来处理作为部署一部分的静态资产，您需要做的就是确保 Vue CLI 在正确的位置生成用于构建的文件，然后按照部署说明进行操作后端框架。
如果您要与后端分开开发前端应用程序。您可以将 dist 目录中构建的内容部署到任何静态文件服务器，但请确保设置正确的 publicPath。
本地预览： dist 目录旨在由 HTTP 服务器提供服务，因此如果您直接通过 file:// 协议打开 dist/index.html 它将无法工作。在本地预览生产版本的最简单方法是使用 Node.js 静态文件服务器，例如：

文章图片

CPRS：如果您的静态前端与后端 API 部署到不同的域，您将需要正确配置 CORS。
PWA：如果您使用 PWA 插件，则您的应用程序必须通过 HTTPS 提供服务，以便 Service Worker 可以正确注册。
【教程（如何使用4EVERLAND部署一个免费去中心化VUE.JS前端项目）】GitHub

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

文章图片
Vue CLI 将路由器添加到项目中，并使用基本路由功能自动更新项目文件。
如果您想了解更多信息，请查看官方Vue CLI 指南。
将您的项目上传到Github账户。

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

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