ホームページ  >  記事  >  ウェブフロントエンド  >  vue の cli 公式ファイルからの、yarn を使用した手動の純粋な静的ファイルのパッケージ化とデプロイメント プレビュー リンク (GitHub にデプロイ)

vue の cli 公式ファイルからの、yarn を使用した手動の純粋な静的ファイルのパッケージ化とデプロイメント プレビュー リンク (GitHub にデプロイ)

大佬别动我昵称
大佬别动我昵称オリジナル
2021-11-12 23:08:16190ブラウズ

プロジェクトを作成した後、それをデプロイして公開する必要があります。vue@cli を使用して構築されたこのプロジェクトにはフロントエンドの静的ファイルのみがあり、バックエンド インターフェイスを呼び出します。GitHub にデプロイされている場合は、この手順を使用できます。

注意すべき点: 1. gitbash がインストールされ、構成されている

2. コードを変更するたびに、実稼働環境にプッシュする必要があります

3. これは手動で更新する手順ですが、手動で更新することもできます自動的に更新されます。追加の構成が必要です

環境が 2 つあるため、コードを配置する環境と本番環境の 2 つのウェアハウスを構築する必要があります。これにより、新しい生産ライン ブレークが生成され、生産環境が保存されている倉庫にプッシュされます。

1、コマンド ライン

```yarn build

```

2.

リンクをクリックします。言語を中国語に切り替えてください

![ビルド成功後のリンク]( https://img.php.cn/upload/image/421/242/536/1636642339926184.png "ビルド成功後のリンク")

生成された dist ディレクトリを監視するために何かを使用します

~~~

yarn global addserve

serve -s dist

//これらの 2 行は、dist ディレクトリがパッケージ化されていることを確認するためのものです

~~~

インストール後、Web ページのポートが 5000 を超えると、パッケージ化されたファイルが圧縮されます。

3. vue.config.js で正しい publicPath を設定します。

~~~

module.exports = {

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

'/my-project/' // 本番環境の名前

: '/ ' / /

}

~~~

4. プロジェクトにdeploy.shファイルを作成します

~~~

#!/usr/bin/env sh

# エラーが発生した場合にスクリプトを中止します

set - e

# Build

npm run build

# ビルド出力のディレクトリに cd

cd dist

# カスタム ドメイン名にデプロイ

# echo 'www.example.com' > ; CNAME

git init

git add -A

git commit -m 'deploy'

# https://.github.io

# git Push -f git@github.com : /.github.io.git master

# https://.github.io/

# git Push -f git@github. com:.git master:gh-pages

cd -

~~~

次に、deploy.sh

~~~

//環境gitbashを設定する必要があります, cmder

shdeploy.sh

//ファイル内のコマンドを実行します

~~~

以上がvue の cli 公式ファイルからの、yarn を使用した手動の純粋な静的ファイルのパッケージ化とデプロイメント プレビュー リンク (GitHub にデプロイ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。