ホームページ >ウェブフロントエンド >Vue.js >vue の cli 公式ファイルからの、yarn を使用した手動の純粋な静的ファイルのパッケージ化とデプロイメント プレビュー リンク (GitHub にデプロイ)
プロジェクトを作成した後、それをデプロイして公開する必要があります。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://
# git Push -f git@github.com :
# https://
# git Push -f git@github. com:
cd -
~~~
次に、deploy.sh
~~~
//環境gitbashを設定する必要があります, cmder
shdeploy.sh
//ファイル内のコマンドを実行します
~~~
以上がvue の cli 公式ファイルからの、yarn を使用した手動の純粋な静的ファイルのパッケージ化とデプロイメント プレビュー リンク (GitHub にデプロイ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。