GiteeページへのGitHubのページへのプロジェクトとの同期を展開VUE

はじめに：私はあなたが誰もが参照するための共有にプロジェクトサイトを作りたい場合は、多くのフロントエンド開発者は、自分のVUEのプロジェクトを持っていると信じている、最も一般的なのはGiteeページサービスGithubのGitHubのページのサービス提供とGiteeが提供を使用することです。これは、GitHubのは、外国サイト、Gitee国内事業所（高速アクセス）です。この記事ではgithubのページへVUE-CLI 3.0+プロジェクトを展開し、giteeページに同期するためにどのように伝えることです。

まず、サービスの説明と注意事項

あなたのgithubのプロジェクト設定でGitHubのページアイテムは、それが読み取ります。

ページとGitHubのをホストするように設計されて、あなたの個人、組織、またはA GitHubのページとプロジェクトのリポジトリから。
翻訳：GitHubのページには、個人、組織やプロジェクトのページからあなたのGitHubリポジトリをホストするように設計。

この文は、GitHubのページの目的を導入することであるGithubのページと英語であるに起因する、いくつかの他がある公式サイト、我々は2が類似している、直接指示Giteeページのサービスを見る方が良いです、ハードに見えました。
Giteeページサービスの説明
私たちはライン上の違反を見ないことに注意してください、ここでの焦点は、赤いボックスの内容は、ページのサービスは静的なプロジェクトをサポートし、判明したプロジェクトは、サーバーのサポートを必要とする場合、それは上記の展開に適していないことを伝えることです。

第二に、プロジェクト構成の注意事項

歴史を有効にしない1、VUE-ルータモード

通常のプロジェクト我々は、サイトの「＃」を含むパスと歴史VUE-ルータモードを開きますが＃記号を削除しますので。しかし、歴史はサポートサーバモードに必要になって、私たちは歴史モードをオンにすることはできませんので、したがって、中githubのページでこのモードをサポートしていません。

2、vue.config.js正しいpublicPathに設けられています

HTTPSへのプロジェクトを展開するには：// <USERNAME> .github.io / <REPO> / （つまり倉庫アドレスhttps://github.com/ <USERNAME> / <REPO>上）、「publicPathに設定することができます/ <REPO> /」。
たとえば、「VUE管理者・ウェブ」という名前の私の倉庫は、その後、vue.config.js内容は次のようになります。

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-admin-web/'
    : '/'
}

第三に、展開githubのプロジェクト

上記の構成を行った後、あなたが倉庫を建て、この倉庫でのプロジェクトの成功にプッシュしたと仮定すると、githubの上のプロジェクトをプッシュすることが可能です。次に、我々はgithubのページにあなたのプロジェクトを展開する2つの方法があります。[参考VUE-cliの公式な説明]
方法1：手動でプッシュが更新
プロジェクトディレクトリの下に、1を、文書を作成deploy.shを次のように読み込みます

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下 
cd dist

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages

cd -

2、ファイルを実行する
コマンドウィンドウをcmdをプロジェクトディレクトリにオープン（ショートカット：プロジェクトディレクトリ、Shiftキーダウンホールドでは、右クリックして選択し、「ここでコマンドウィンドウを開きます」）

// Linux环境下
bash deploy.sh
// Windows环境下
deploy.sh

操作の後、Gitは、コマンドファイルを実行します。で、大体、パッケージ構築するためのアイテムコード、コードがパッケージ化されたアップロードGH-ページの枝倉庫。（注：新倉庫のデフォルトのみマスターブランチ、無分岐GH-ページが、あなたはそれが自動的にあなたがGH-ページの枝を生成するのに役立ちます、ファイルを実行し、手動でブランチを作成する必要はありません）
あなたのプロジェクトがに配備されているので、 githubのページをアップ。あなたのgithubのプロジェクトの設定- [オプション]の下のGitHubのページアイテムは、プロジェクトのオンラインウェブサイトのアドレスを見ることができます。
例：https://marco-hui.github.io/vue-admin-web/
ここに画像を挿入説明
2：トラヴィスCIは自動的に更新され
、手動で更新するには、上記の方法は、プロジェクトの展開を完了することができましたが、反復の各バージョンは、あなたがする必要があります我々は、彼らがより簡単にしたい、卓越しかし、非常に面倒ではないが、deploy.shこのドキュメントで実行するために手動であるあなたはmasterブランチにコードをプッシュする、あなたしている自動的に建物を完了し、準備ができて、アップロードGH-ページ支店その自動化の展開。トラヴィスCIは、これを行うために使用することができます。

1は、「レポ」権限のGitHub生成したアクセストークンを。
githubのは、ライン上で動作させるための公式ウェブサイトによると、ここで紹介を行うことはあまりありませんが、非常に単純なトークンの方法を取得します。

2、トラヴィスの特権がリポジトリへのアクセスを許可され
、ログ、自分のgithubのアカウントでトラヴィスCI、の公式サイト登録が完了した後に、ページの左側の新しいボタンをクリックして、あなたの倉庫のページを入力してください。
ここに画像を挿入説明
このページでは、あなたのgithubの上のすべての項目を表示しますが、スイッチを展開するプロジェクトを開き、[設定]をクリックします。

設定ページでは、我々は、図1に示すように、いくつかの環境変数を定義する必要があります。
ここに画像を挿入説明
定義されたら、ステップ3に進みます。

次.travis.ymlファイルのルートディレクトリにコンテンツアイテムを作成します。3.。

language: node_js
node_js:
  - "8"

install:
  - npm install

script:
  - npm run build

after_success:
  - cd ./dist
  - git init
  - git config --global user.name "${U_NAME}"
  - git config --global user.email "${U_EMAIL}"
  - git add .
  - git commit -m "Automatically update from travis-ci"
  - git push --quiet --force  "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}

branches:
  only:
    - master

4は、倉庫に.travis.ymlプッシュファイルは、最初の自動ビルドをトリガします。
.travis.ymlが自動的に操作を習得するために、すべてのGitのプッシュした後、展開を構築しますmasterブランチ倉庫にアップロードした後、自動更新をトリガします。このように、あなたのgithubのページサイトのコンテンツは、最新のリアルタイムの友人と更新されます。

これまでのところ、我々はそれを自動的にデプロイするためにGitHubのページへのVueのプロジェクトを完了しました！我々は、国内のウェブサイトは上記gitee展開するプロジェクトを検討していきますので、しかし、githubの、すべての外国のWebサイトの後、そして時には、特に遅い、それらを参照してください。Giteeページへの展開の基礎githubのプロジェクトは、特に単純な問題となりで、ちょうどgitee同期githubのプロジェクトにすることができます。

Giteeページに同期第四に、

1、导入github项目
登录Gitee官网，在右上角 “+” 中选择“从GitHub导入仓库”，当然前提是你已经绑定了github账号作为你的gitee第三方账号，未绑定的在设置 - 第三方账号绑定即可。
ここに画像を挿入説明
进入到导入Github仓库页，选择你要导入的项目。

导入成功后，你会发现，除了master的代码被导过来，所有分支和标签也被同步过来了。

2、开启Gitee Pages服务
项目导入成功后，接下来我们需要开启该项目的Gitee Pages服务。点击项目上方的服务-Gitee Pages，进入Gitee Pages 服务配置页。
ここに画像を挿入説明
部署分支选择 gh-pages，部署目录不填，勾选强制使用HTTPS，点击启动，随后会进行部署。

部署成功后，会在当前页面看到你的Gitee Pages网站地址，打开地址即可看到你的项目网站，和GitHub Pages的一模一样，而且Gitee Pages网站加载会快很多。
示例：https://marco-hui.gitee.io/vue-admin-web
ここに画像を挿入説明
3、项目更新
往后项目的更新，首先还是先将代码push到github上面，待GitHub Pages部署成功后，再在gitee的项目中，点击更新按钮，将github项目的代码强制同步到gitee中即可。

以上，我们就完成了将Vue 项目部署到GitHub Pages，且实现自动部署，并同步到Gitee Pages上。

添付ファイル：
プロジェクトのgithubの住所：マルコ・ホイ/ VUE-ADMIN-のWeb
プロジェクトのGitHubページのWebサイトのアドレス：https://marco-hui.github.io/vue-admin-web
プロジェクトGiteeページのWebサイトのアドレス：HTTPS：// marco- hui.gitee.io/vue-admin-web