コードクラウドにvue静的ページをデプロイする方法

フロントエンド テクノロジの継続的な開発により、ますます多くの企業や個人が Vue.js を使用してフロントエンド アプリケーションを開発し始めています。 Vue.js 開発者にとって、Vue 静的ページをデプロイする方法は必要なスキルになっています。

Code Cloud は国産のオープンソース コード ホスティング プラットフォームです。Vue.js 開発者がプロ​​ジェクトをより適切にクラウドにデプロイできるように、この記事では Code Cloud を使用して Vue 静的ページをデプロイする方法を紹介します。

1. 準備

Vue 静的ページをデプロイする前に、プロジェクトが正常に構築されたことを確認する必要があります。 Vue.js プロジェクトでは、通常、Vue CLI を使用してビルドが行われ、ビルドの出力により、すべての静的リソースとコードを含む dist ディレクトリが生成されます。

2. ウェアハウスの作成とコードのアップロード

まず、コード クラウド上にウェアハウスを作成する必要があります。 Code Cloudにログインし、「Code Cloud」と入力し、「ウェアハウスの作成」を選択し、対応する情報を入力するとウェアハウスの作成が完了します。

ウェアハウスの作成が完了したら、ローカル コードをウェアハウスにアップロードする必要があります。ローカル Vue プロジェクトのルート ディレクトリで、次のコマンドを使用します。

git init
git add .
git commit -m 'first commit'
git remote add origin <仓库地址>
git push -u origin master

これにより、コードがコード クラウド ウェアハウスに正常にアップロードされます。

3. ウェアハウスの構成

コードをアップロードした後、Web ページがブラウザーで正しく実行できるようにウェアハウスの設定を構成する必要もあります。

ウェアハウスで「設定」を選択し、「デプロイ公開鍵」列に公開鍵を追加します。追加方法は 2 つあります: ローカル公開鍵を直接アップロードするか、Code Cloud によって生成された鍵を使用します。

追加が完了したら、ウェアハウスに新しいブランチを作成する必要があります。ブランチ名は任意です。次に、ブランチの設定で「静的ページ」を選択します。

静的ページでは、サービス プロバイダーとして GitHub Pages を選択し、先ほど作成したブランチとしてブランチを選択する必要があります。

次に、静的ページのエントリ ファイルに入力する必要があります。これは、ここではホームページ ファイル (通常は、index.html) を指します。ブランチとエントリ ファイルの設定が完了したら、[保存] ボタンをクリックしてウェアハウスの構成を完了します。

4. ページの表示

構成が完了すると、ブラウザを通じて静的ページにアクセスできるようになります。ウェアハウスのホームページには「Git Pages」ボタンがあり、これをクリックしてデプロイ Web ページにアクセスします。

GitHub Pages を使用していることに注意してください。デフォルトでは、ウェアハウス名がドメイン名として使用されます。そのため、ページにアクセスする際には、ウェアハウス名の後に「/」とエントリーファイル名を付ける必要があります。例:

https://用户名.gitee.io/仓库名/index.html

5. 展開の更新

最初の展開が完了した後、プロジェクトは頻繁に更新される可能性があります。では、新しいコードを展開 Web ページに更新するにはどうすればよいでしょうか?具体的な手順は次のとおりです:

まず、次のコマンドを使用してローカル プロジェクトでコードを再構築する必要があります:

npm run build

これにより、新しく変更されたコードを含む新しい dist フォルダーが自動的に生成されます。コード。

次に、コード クラウド ウェアハウスで次のコマンドを使用して、新しいコードを新しく作成したブランチにプッシュする必要があります:

git push origin 分支名

アップロードが完了したら、更新された静的ファイルを参照できます。ページはサーバーで直接表示できます。

概要

この記事の導入部を通じて、Code Cloud を使用して Vue 静的ページをデプロイする方法を学びました。実際の開発では、さまざまな特定の状況に応じて構成およびカスタマイズできます。この記事が皆さんのお役に立てば幸いです。

以上がコードクラウドにvue静的ページをデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。