Vue3+TS+Vite 開発スキル: プロジェクトをデプロイしてオンラインにする方法

Vue3 TS Vite 開発スキル: デプロイしてオンラインにする方法

1. プロジェクトのセットアップ
始める前に、まず Node がインストールされていることを確認する必要があります。 .js と Vue CLI を使用し、次のコマンドを実行して新しい Vue3 TS Vite プロジェクトを作成します:

vue create project-name

次に、[機能を手動で選択する] を選択し、[TypeScript] にチェックを入れて、最後に Enter キーを押してインストールします。

2. 開発環境の設定

1. Vite 設定ファイルを変更する
   プロジェクトのルート ディレクトリで vite.config.ts ファイルを見つけて、次の内容を変更します。

   import { defineConfig } from 'vite'
   
   export default defineConfig({
     base: './',
   })

   ログイン後にコピー

   このように設定すると、現在のパスをベースパスとして使用してプロジェクトがパッケージ化されます。

2. デプロイ ディレクトリの構成
   src/env/production.ts ファイルを開き、publicPath をデプロイしたいディレクトリに変更します。プロジェクト ディレクトリ。例:

   export default {
     publicPath: '/your-project-name/',
   }

   ログイン後にコピー

   このように設定すると、パッケージ化されたファイルは自動的に /your-project-name/ ディレクトリに配置されます。

3. プロジェクトの構築とパッケージ化

1. プロジェクトをビルドする
   次のコマンドを実行して、プロジェクトをデプロイ可能な静的ファイルにビルドします。

   npm run build

   ログイン後にコピー

   構築が完了すると、プロジェクトのルート ディレクトリに dist フォルダーが生成され、パッケージ化された静的ファイルが保存されます。

2. ローカル テスト
   次のコマンドを使用して、ローカルでサーバーを起動し、パッケージ化されたプロジェクトをテストできます:

   npm install -g http-server
   cd dist
   http-server

   ログイン後にコピー

   次に、ブラウザで http を開きます。 //localhost:8080 プロジェクトの効果を表示します。

4. サーバーへのデプロイ

1. パッケージ化されたファイルをサーバーにアップロードします
   ファイルを dist フォルダーに置きますすべてのファイルは、FTP ツールまたはその他の方法を使用してサーバーにアップロードされます。ファイルが正しいディレクトリにアップロードされていることを確認してください。

2. サーバーの構成
   サーバー上で、静的ファイルのリクエストを処理するために nginx (または他の同様のサーバー ソフトウェア) を構成する必要があります。 nginx を使用していると仮定すると、構成ファイルに次の内容を追加できます。

   server {
     listen 80;
     server_name your-domain.com;
   
     location / {
    root /path/to/your-project/;
    try_files $uri $uri/ =404;
     }
   }

   ログイン後にコピー

   your-domain.com はドメイン名に置き換えられることに注意してください。 /path/to/your-project/ を、プロジェクトをアップロードしたディレクトリに置き換えます。

3. サーバーの起動
   nginxサーバーを再起動して、構成を有効にします。
4. デプロイメントを確認する
   ドメイン名またはサーバーの IP アドレスを開きます。すべてが正常であれば、ブラウザーでプロジェクトが実行されているのが確認できるはずです。

概要
上記の手順により、Vue3 TS Vite に基づいて開発されたプロジェクトをデプロイしてオンラインにし、サーバー上で実行できるようになります。この記事があなたのお役に立てば幸いです。また、あなたのプロジェクトがオンラインでスムーズに進むことを願っています。

上記は、Vue3 TS Vite 開発スキル: プロジェクトをデプロイしてオンラインにする方法です。

(上記の記事は参考用です。具体的な操作は実際の状況に応じて調整する必要があります)

以上がVue3+TS+Vite 開発スキル: プロジェクトをデプロイしてオンラインにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。