关于前端:教程如何使用4EVERLAND部署一个免费去中心化VUEJS前端项目

32次阅读

共计 1094 个字符,预计需要花费 3 分钟才能阅读完成。

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 能够正确注册。

GitHub

  1. 在 vue.config.js 中设置正确的 publicPath。
  2. 在您的我的项目中,创立蕴含以下内容的 deploy.sh(适当地勾销正文突出显示的行)并运行它以进行部署:
  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:查看部署历史
    • 点击标记返回我的项目列表
    • 单击我的项目以查看详细信息
    • 单击导航选项卡上的部署以查看部署历史记录
    如果构建步骤失败并且构建设置须要更新,请查看我的项目设置。
正文完
 0