通过与 Jira 对比,让您更全面了解 PingCode

  • 首页
  • 需求与产品管理
  • 项目管理
  • 测试与缺陷管理
  • 知识管理
  • 效能度量
        • 更多产品

          客户为中心的产品管理工具

          专业的软件研发项目管理工具

          简单易用的团队知识库管理

          可量化的研发效能度量工具

          测试用例维护与计划执行

          以团队为中心的协作沟通

          研发工作流自动化工具

          账号认证与安全管理工具

          Why PingCode
          为什么选择 PingCode ?

          6000+企业信赖之选,为研发团队降本增效

        • 行业解决方案
          先进制造(即将上线)
        • 解决方案1
        • 解决方案2
  • Jira替代方案

25人以下免费

目录

如何将随手记(vue-cli记账本项目)部署到gitee

如何将随手记(vue-cli记账本项目)部署到gitee

随手记(Vue-cli记账本项目)可以通过以下几个步骤轻松部署到Gitee Pages上:首先构建打包项目、然后在Gitee上创建仓库、接着配置项目中的静态资源路径、其次在Gitee中开启Pages服务、最后提交代码触发部署。详细的操作流程如下:

一、构建打包项目

在将随手记项目部署到Gitee之前,你需要执行构建过程生成静态资源。在项目根目录下,使用命令行执行以下操作:

  1. 首先,确保你已经全局安装了Vue-cli工具。如果未安装,可通过npm命令安装:
    npm install -g @vue/cli

  2. 接下来,运行npm install以安装项目依赖项,确保在打包前项目能够正确地运行:
    npm install

  3. 然后,执行以下命令以制作生产环境的打包文件:
    npm run build

    这个命令会生成一个dist/目录,里面包含了用于部署的所有静态文件。

二、在Gitee上创建仓库

  1. 登录Gitee账号,并在“我的仓库”页点击“新建仓库”按钮。
  2. 填写仓库名称(建议与本地项目名保持一致),设置为公开,其他设置按需选择。
  3. 创建完成后,会显示仓库的SSH或HTTPS地址,备用。

三、配置项目中的静态资源路径

因为在Gitee Pages服务中,你的页面会被发布在一个子路径下,例如https://<username>.gitee.io/<repo>,所以你需要在Vue项目中配置静态文件的基本路径。

  1. vue.config.js文件中配置publicPath,如果不存在这个文件,需要手动创建:
    module.exports = {

    publicPath: process.env.NODE_ENV === 'production'

    ? '/<repo>/'

    : '/'

    }

  2. 替换<repo>为你Gitee仓库的名称。

四、提交代码至Gitee仓库

  1. 在本地项目根目录初始化Git:
    git init

  2. 添加所有打包文件到Git暂存区:
    git add dist

  3. 提交更改到本地仓库:
    git commit -m "Initial dist subtree commit"

  4. 添加Gitee Pages的仓库地址为远程地址,并推送代码:
    git remote add origin <YOUR GITEE REPO URL>

    git subtree push --prefix dist origin master

五、在Gitee中开启Pages服务

  1. 在Gitee页面上,进入到你的仓库中。
  2. 点击“服务”选项卡,选择“Gitee Pages”服务。
  3. 设置Gitee Pages的来源分支为master,保存设置。
  4. Gitee会自动分配一个访问URL,你的Vue-cli记账本项目就部署成功了。

每次你更新代码后,重复上述的打包和Git操作,就能够更新你在Gitee Pages上的项目内容。请注意,Gitee Pages可能并不支持Vue-cli项目中的所有路由功能,所以对于那些需要后端支持的特性,你可能需要额外的配置或服务。

相关问答FAQs:

1. 我需要在gitee上创建什么样的仓库来部署随手记(vue-cli记账本项目)?

在gitee上部署随手记(vue-cli记账本项目),你需要创建一个新的仓库来存放项目的代码和相关文件。这个仓库可以是公开的或私有的,根据你的需求来设置。

2. 如何将本地的随手记(vue-cli记账本项目)上传到gitee仓库?

将本地的随手记(vue-cli记账本项目)上传到gitee仓库有几种方式。一种简单的方式是使用gitee提供的图形界面,在仓库页面点击"添加文件",然后选择你的本地项目文件夹,将项目的所有文件一次性上传到仓库中。

另一种方式是通过git命令行工具来进行上传。首先,你需要在本地的项目文件夹中使用git初始化一个新的本地仓库。然后,将该仓库与gitee仓库进行关联,使用git remote add命令,将仓库链接复制到远程仓库的链接中。最后,使用git push命令将本地项目推送到gitee仓库。

3. 部署随手记(vue-cli记账本项目)到gitee后如何访问?

一旦你成功部署随手记(vue-cli记账本项目)到gitee,你可以通过访问你在gitee上创建的仓库链接来查看该项目。在仓库页面的顶部会显示项目的链接,点击链接即可访问。

在访问随手记项目之前,你需要确保项目已经部署到gitee的静态网页服务上。如果未部署,你可以在gitee仓库的设置中,找到相关选项来激活该服务。一旦激活,你就可以使用项目的链接来访问随手记应用了。

相关文章