VueCLI是一个用于快速Vue.js开发的完整系统,旨在成为Vue生态系统的标准工具基线。在本指南中,我们将介绍如何使用4everland部署Vue.js前端应用程序。一:设置你的Vue.js项目如果你使用VueCLI和后端框架来处理静态资产作为部署的一部分,你需要做的就是确保VueCLI在正确的位置生成构建文件,然后按照部署说明操作后端框架。如果您正在与后端分开开发前端应用程序。您可以将dist目录中构建的内容部署到任何静态文件服务器,但请确保设置正确的publicPath。本地预览:dist目录旨在由HTTP服务器提供服务,因此如果您直接通过file://协议打开dist/index.html,它将无法工作。在本地预览生产构建的最简单方法是使用Node.js静态文件服务器,例如:CPRS:如果静态前端部署到与后端API不同的域,则需要正确配置CORS。PWA:如果您使用PWA插件,您的应用程序必须通过HTTPS提供服务,以便serviceworker正确注册。GitHub在vue.config.js中设置了正确的publicPath。在您的项目中,创建一个包含以下内容的deploy.sh(适当地取消注释突出显示的行)并运行它进行部署:VueCLI将路由器添加到项目并使用基本路由功能自动更新项目文件。如果您想了解更多信息,请查看官方VueCLI指南。将您的项目上传到您的Github帐户。二:使用4everland部署您的Vue.js项目要使用4everland部署您的Vue.js应用程序,请确保您已将其推送到您的GitHub存储库。要开始部署,请单击“导入”并选择您连接到的Git帐户。设置根目录设置根目录,大部分项目可以保持默认,monorepo可以选择一个子目录,这是运行npminstall和build命令的地方。2:配置构建设置设置根目录后,应该选择默认框架。该框架将有一个默认的构建命令和输出目录,打开覆盖以覆盖默认值。3:环境变量如果需要,设置环境变量,可以在代码中通过process.env.VARIABLE_NAME访问。4:查看构建状态构建状态:?Created:创建新任务?Queued:任务在队列中待处理,应尽快处理?Running:任务正在运行?Sucess:所有构建步骤,部署步骤已完成?失败:部署站点时出现构建或异常/错误5:查看部署历史?单击标志以返回项目列表?单击项目以查看详细信息?单击导航选项卡上的部署以查看部署部署历史如果构建步骤失败并且需要更新构建设置,请检查项目设置。
