vue-cli を使用してプロジェクトを作成し、webpack でパッケージ化する方法

1. 環境を準備する（Node.jsをダウンロードし、環境変数を設定する）
2. vue-cliをグローバルにインストールし、vueコマンドを実行してvueプロジェクトを作成します。

npm インストール -g @vue/cli

旧バージョンについて
Vue CLI のパッケージ名が vue-cli から @vue/cli に変更されました。古いバージョンの vue-cli (1.x または 2.x) をグローバルにインストールしている場合は、まず npm uninstall vue-cli -g または yarn global remove vue-cli を使用してアンインストールする必要があります。

3. webpackテンプレートに基づいて新しいプロジェクトを作成します（最初に新しいプロジェクトフォルダーを作成し、その場所でコマンドラインを開きます）

vue init webpack マイプロジェクト

4. デフォルト設定を実行する

# ここではいくつかの設定が必要ですが、デフォルトでは Enter キーを押すだけです。これにより、テンプレートの Vue 2.x バージョンがインストールされます。

Vue 1.x の場合は以下を使用します: vue init webpack#1.0 my-project
# 設定を開始しますか? プロジェクト名 my-project
? プロジェクトの説明 Vue.js プロジェクト
? 著者 runoob <[email protected]>
? Vue ビルド スタンドアロン
? ESLintを使用してコードをリントしますか? はい
? ESLintプリセット標準を選択
? Karma + Mocha でユニットテストをセットアップしますか? はい
? Nightwatchでe2eテストを設定しますか? はい
# 構成は vue-cli で終了 · 「my-project」が生成されました。

   開始するには:
   
     cd 私のプロジェクト
     npmインストール
     npm 実行 dev
   
   ドキュメントは https://vuejs-templates.github.io/webpack にあります。

5. プロジェクトに入り、node_modulesをインストールしてプロジェクトを開始します。

cd 私のプロジェクト
npmインストール
npm 実行 dev

6. プロジェクトをパッケージ化し、nginxを構成する

#プロジェクトをパッケージ化 npm run build

nginx の設定

ワーカープロセス 1;

イベント {
    ワーカー接続 1024;
}

http {
    mime.types を含めます。
    デフォルトタイプ アプリケーション/オクテットストリーム;
    ファイル送信オン;
    キープアライブタイムアウト65;

    サーバー{
        聞く 8081;
        server_name ローカルホスト;

		位置 / {
            ルート E:/vuework/my-project/dist;
			try_files $uri $uri/ /index.html;
            インデックス index.html index.htm;
        }
    }
}

7. パッケージ化が繰り返され、ファイルが更新されません。
ビルドディレクトリの webpack パッケージファイル内の clean-webpack-plugin プラグインを参照し、プラグインで使用します。

ここに画像の説明を挿入

8. デプロイメント: nginx を設定し、プロジェクトをパッケージ化し、nginx を起動します。

npm 実行ビルド
nginxを起動する

これで、vue-cli を使用してプロジェクトと webpack パッケージを作成する方法についての記事は終了です。vue webpack パッケージの関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: