コードクラウドにvue静的ページをデプロイする方法-フロントエンドQ&A-php.cn

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

王林

リリース： 2023-05-08 11:10:07

オリジナル

781 人が閲覧しました

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

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

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

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

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

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

ログイン後にコピー

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

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

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

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

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

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

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

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

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

ログイン後にコピー

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

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

npm run build

ログイン後にコピー

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

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

git push origin 分支名

ログイン後にコピー

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

概要

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

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