nginxのサーバーを展開するのVue-CLIプロジェクト

0 nginxの使用

任意のディレクトリに、Windowsのバージョン、例えば、ダウンロードniginxアーカイブおよび抽出物を、ダブルクリックnginx.exe、アクセスブラウザをHTTP:// localhostの Welcomeページがnginxのに表示された場合、成功を示します!

nginxの一般的なコマンドは次のとおりです。

nginxの-h#オープン助け
nginxの-t#設定ファイルを確認してくださいが正しい

最初のスタートを実行するには、次のコマンド#をnginxの
nginxの-s停止#ストップ
nginxの-s終了#終了
nginxの-s#再起動(注を再び開きません再読み込み設定ファイルを取る)
nginxの-sリロード#再読設定ファイル

1.展開nginxののルートディレクトリにプロジェクト

(独自に作成されていない場合、プロジェクトのルートディレクトリにある)プロジェクトについてVUE-CLIは、vue.config.jsファイルを変更作成します。

= {module.exportsは
//ポート開発環境を使用
devserver:{ 
ポート:8001 
}、
//生成されたマップファイル(ファイルが正確にどの列が間違っている行の出力マッピングすることができる)キャンセル
productionSourceMap:falseに、
//開発環境パスとデプロイメント環境
publicPath:process.env.NODE_ENV === '生産' 
'/'?
'/マイ/'、
configureWebpackます。(config)=> { 
//増加-ローダーのiView 
config.module.rules [0 ] .use.push({ 
ローダ: 'のiViewローダ'、
オプション:{ 
接頭辞:偽へ
} 
})
//コマンドラインVUEを使用o.jsが変更された構成ファイルのWebPACKを確認することができ>検査
} 
}

ビルド出力ファイルが作成されたプロジェクトのルートディレクトリコマンドNPMの実行中のVue、(独自に作成されていない場合)内のnginxの下のwebapp /ディレクトリにdistのフォルダのすべての内容をコピーします。

変更のconf / nginx.confファイルnginxのディレクトリは、http - >サーバーノード、コンテンツの場所]セクションを変更します。

位置/ { 
ルートWebアプリケーション。
index.htmをindex.htmlをインデックス。
}

ブラウザにルートディレクトリにコマンドnginxのnginxの-sリロードを使用します。http:// localhostのプロジェクトへのアクセス。

nginxのを展開する2.複数のプロジェクト

時々、nginxのは、いくつかのサブプロジェクトに入れて、異なる経路を通って別のプロジェクトにアクセスする必要があります。

項目1の目的のために、publicPath vue.config.jsファイルを修正します:

publicPath: '/vue1/'

項目2については、変更publicPath vue.config.jsファイル:

publicPath: '/vue2/'

Vueのコマンドは、プロジェクトのルートディレクトリの実行ビルドに使用されたことは、出力ファイルNPMを作成します(ない場合は、独自に作成)nginxのvue1下でのwebapp / vue2内のwebapp /ディレクトリにdistのフォルダのすべての内容をコピーします。

変更のconf / nginx.confファイルnginxのディレクトリは、http - >サーバーノード、コンテンツの場所]セクションを変更します。

 

位置/ vue1 { 
ルートWebアプリケーション。
index.htmをindex.htmlをインデックス。
} 

場所/ vue2 { 
ルートWebアプリケーション。
index.htmをindex.htmlをインデックス。
}

 

nginxのnginxの-sリロードルートディレクトリを経由してブラウザにすることができ、コマンドを使用します// localhost /をvue1:HTTP// localhost /をvue2:HTTP項目1、項目2にアクセスします。

3.ポートエージェント

、同じポートを使用しないので、現在の番組の後端が、同じマシン上に展開されているときに後端部はまた、一般的にポート番号の異なる値(例えば8080)に設定したが、リソース要求に追加することと、現在の後端上部ポートは、トラブルのビットは、それが後端剤ポート8080に指定されたパスnginxのフロントエンドで使用できると思われます。

confに/ nginx.confファイルに増加した場所:

位置/ API { 
proxy_passのhttp:// localhostを:8080 / API。
}

 

このように、現在のクライアント・アクセス/ APIのパスは、実際にアクセスします。http:// localhostを:8080 / APIのパス。

また、記事に興味がある可能性があります。

記事の同時リリース:  https://www.geek-share.com/detail/2786605435.html

おすすめ

転載: www.cnblogs.com/xiaoqifeng/p/11998918.html