vue2项目部署到码云(gitee/pages)的操作步骤

本文详细介绍了如何在Gitee上部署Vue2项目,包括创建仓库、配置vue.config.js、添加特殊文件'.spa'、设置publicPath以及打包上传。关键步骤在于设置publicPath以解决路径问题,并通过Gitee Pages服务发布网页。实名认证后,选择部署目录为'dist',成功后即可通过生成的网址访问项目。
摘要由CSDN通过智能技术生成

说明:本文默认你已经将vue2项目做完,且还未打包;默认你会使用git提交代码到gitee仓库,只是还不会使用gitee的pages功能。

1、打开gitee官网并登录,登录 - Gitee.com

2、创建一个gitee仓库,假设命名为 'mystore' ,然后将写好的vue项目提交到这个仓库;

        ============ 第3,4两步为重要步骤 ============

3、在gitee上部署单页应用需要在根目录创建一个空的文件,文件名为“.spa”

 

4、需要在vue.config.js文件中,配置 publicPath: "/mystore/",这里的mystore为你的仓库名称,解决部署后的路径请求问题

module.exports = defineConfig({
  publicPath: "/mystore/"
})

5、然后对项目进行打包,将打包后的文件上传到gitee(这里需要将.gitignore文件中的dist字段删除,不然dist文件是默认被忽略,无法上传到gitee仓库的)

 6、如图,进入到mystore仓库后,找到 服务 --> gitee pages

 这里第一次进入是需要实名认证的,按步骤操作即可,一般1-2个工作日审核完,如果急需使用,也可以到官方交流群里面催管理员审核

7、审核完毕之后,按如下图操作即可,部署目录需要写上dist

 部署完毕后,会有一个网站地址,能打开看到你的项目页面,即表示部署成功

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 1. 在Gitee上创建一个新的仓库。 2. 打开命令行终端,进入项目所在的目录。 3. 安装vue-cli:在命令行终端中输入 npm install vue-cli -g 。 4. 初始化项目:在命令行中输入 vue init webpack my-project (my-project为你的项目名称)。 5. 进入项目文件夹:cd my-project。 6. 安装依赖:npm install。 7. 修改config/index.js文件,将build.assetsPublicPath修改为“./”,并将build.productionSourceMap修改为false。 8. 打包项目:npm run build。 9. 将打包后的文件上传到Gitee的仓库中。 10. 在Gitee的仓库中打开Pages服务,设置镜像站点访问地址为“/”即可。 ### 回答2: 发布Vue2项目Gitee需要以下几个步骤: 1. 创建Gitee账号:首先在Gitee官网上注册一个账号,并登录到账号中。 2. 新建仓库:在Gitee账号中,进入"仓库"页面,点击"新建仓库"按钮,填写仓库的相关信息,如仓库名称和描述等。 3. 本地项目初始化:在本地项目的根目录下,使用命令行工具输入命令`git init`,初始化本地Git仓库。 4. 关联远程仓库:在命令行工具中,输入命令`git remote add origin 仓库地址`,将本地仓库与远程Gitee仓库关联起来。 5. 添加代码并提交:将Vue2项目的所有代码拷贝到本地仓库中,并使用命令`git add .`将所有文件添加到暂存区,然后使用命令`git commit -m "提交的描述信息"`将文件提交到本地仓库。 6. 推送到远程仓库:使用命令`git push origin master`将本地仓库的代码推送到远程仓库中。 7. 验证发布:打开Gitee账号中的仓库页面,确认项目已经成功发布到Gitee上。 发布Vue2项目Gitee的步骤大致如上所述,根据具体情况可能会有一些变化,但是以上步骤是基本流程。可以根据自己的实际情况进行相应的操作。 ### 回答3: 要将Vue2项目发布到Gitee,我们可以按照以下步骤进行: 第一步,我们需要在Gitee上创建一个新的仓库,用于存储我们的Vue2项目代码。我们可以登录Gitee后,在首页或仓库页上找到“创建仓库”按钮,点击进入创建仓库的页面。 第二步,填写仓库的名称、描述等基本信息,并选择仓库的可见性(公开或私有)。选择好后,点击“创建仓库”按钮来创建新的仓库。 第三步,我们需要将本地的Vue2项目代码与Gitee上的仓库进行关联。在本地的Vue2项目文件夹中,打开命令行或终端窗口,执行以下命令: ``` git init ``` 这将初始化Git仓库。 然后,我们需要将本地的Vue2项目代码添加到Git仓库中,执行以下命令: ``` git add . ``` 这将添加所有的文件。 接下来,我们可以提交这些添加的文件,并添加一条提交注释,执行以下命令: ``` git commit -m "Initial commit" ``` 第四步,我们需要将本地的Vue2项目代码推送(push)到Gitee上的仓库中,执行以下命令: ``` git remote add origin [Gitee仓库的URL] ``` [Gitee仓库的URL] 需要替换成你在Gitee上创建的仓库的URL。 然后,执行以下命令: ``` git push -u origin master ``` 以上命令将本地的代码推送到Gitee上的仓库中,并将master分支关联起来。 第五步,我们可以在Gitee上的仓库页面中,查看我们刚刚推送的代码。此时,我们的Vue2项目已经成功发布到了Gitee上。 总结起来,发布Vue2项目Gitee的步骤包括:创建Gitee仓库、初始化并关联本地Git仓库、添加并提交本地代码、将代码推送到Gitee仓库。以上是一个简单的发布流程,你可以根据实际项目的需要进行更多的设置和操作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值