nginx はローカル起動 vue プロジェクトをデプロイします

要件: vue プロジェクトをローカルで実行せずに、パッケージ化された vue プロジェクトに直接アクセスしたいだけです

1.nginxをインストールする

nginx: ダウンロード、ここでは 1.12.2 安定バージョンをインストールしました

2. ダウンロード直後に圧縮パッケージを取得し、ディレクトリに直接解凍します。

！！！！知らせ！！！解凍パスに中国語を含めることはできません。中国語が含まれる場合、エラーが報告されます。！！

次に、nginx をダブルクリックして起動するか、 nginx の cmd 解凍ディレクトリでstart nginx を実行すると、画面上でウィンドウが点滅していることがわかります。

3. nginxが正常に起動するかどうかを確認する

タスクマネージャーでバックグラウンドプロセスにnginxが存在するか確認し、存在しない場合は起動に失敗します。

4. nginx の起動に失敗した後に解決しました

nginx の解凍ディレクトリにあるログファイルを開き、エラーログを確認し、直接開き、エラーメッセージ Baidu をコピーします。

5. ポート占有エラーのレポート

インターネット上には多くの解決策がありますが、ここでは最も簡単な方法を選択し、nginx のデフォルトのポート 80 を直接変更し、決して占有されないポートに変更します。、ダブルクリックして、この開いている日記を選択します

サーバーの下の listen を見つけて 80 を書き込み、80 を 8888 に直接変更して nginx を再起動します。

nginx の解凍ディレクトリで、 cmd の後にnginx を再起動します。

nginx -s reload

6. vue プロジェクトの vue.config.js ファイルでフロントエンドパッケージ化プロジェクト名を構成します。

process.env.VUE_APP_PUBLIC_PATH これは自分で定義した環境変数です。名前は自分で定義できます。好きな名前を付けることができます。この環境変数をどこに設定するかわからない場合は、次のように自分で書くことができます。

publicPath ="/student/" にします

ベース:「/学生/」

同じ名前で十分です。複数のプロジェクトを設定するには、localhost のエイリアスと一致する必要があることに注意してください。理解できない場合は、下にスクロールしてください

// 基础路径 注意发布之前要先修改这里
let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
module.exports = {
  // 根据你的实际情况更改这里
  publicPath
}

ルーターも変える

// 导出路由 在 main.js 里使用
const router = new VueRouter({
  mode: 'history',
  base: process.env.VUE_APP_PUBLIC_PATH,
  routes
})

7. vue プロジェクトをパッケージ化する

次のコマンドを実行した後

npm run build

パッケージ化された dist ファイルを nginx の html に直接放り込む

7. プロジェクトを実行する

ポート番号80はconfファイルの設定に従って変更されます

http://ローカルホスト:80

8. nginx サービスを終了します

nginx -s stop

9. 複数のプロジェクトをデプロイする (vue、webpack など)

上記の記事は 1 つのプロジェクトをデプロイするためのもので、vue.config.js とルーターは構成の有無にかかわらず構成できます (これがデフォルトです)。

要件: 1 つのポートで n 個の項目を構成

ポートの背後でエイリアスを接続する方法に従って n 個の項目を設定します

conf=="nginx.confで設定します

最初のポートのデフォルトプロジェクトは、構成を行わずに構成し、直接パッケージ化できることに注意してください。
HTML ファイルにプロジェクトを保存する新しいフォルダーを作成します。任意の名前を付けることができます。ここでは、プロジェクトを保存するために 3 つの新しいフォルダーを作成しました。

3. 新しく作成したフォルダーにパッケージ化されたファイルのディレクトリを放り込みます。ディレクトリは次のようになります。

4. conf==》nginx.conf で設定し、最初にサーバーを見つけます。{}、

知らせ！！この /company の名前は、webpack または vue で設定した名前と一致している必要があります。そうでない場合は、常に見つからないことが表示されます。

 server {
#端口号
        listen       8888;
#域名，没有买域名就用本地的不需要改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
#默认项目
        location / {
#这个是目录，从html开始找项目目录
            root   html/web;
            index  index.html index.htm;
        }
#/company 是需要进行配置，如果是端口默认的就不需要配置
        location /company {
      #注意后面需要加/
	  alias html/renren/dist/;
            index  index.html index.htm;
        }
}

5. 2 番目のプロジェクトを設定します。Webpack の場合は、この記事を読むことをお勧めします。

Webパックを設定する

6. 上にスクロールして vue プロジェクトを設定してください。タイトルにはすでに書いています 6

10. ポートが異なれば設定項目も異なります

これは簡単です。直接コピーし、パッケージ化されたプロジェクトを保存するポートとルートアドレスを自分で変更するだけです。

！！知らせ！パッケージ化されたプロジェクトは HTML ファイルに配置する必要があり、他のプロジェクトは機能しません。

 server {
        listen       8870;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root  html/company/dist;
            index  index.html index.htm;
        }

}

11. 最後に

！！！nginx.conf ファイルを変更した場合は、ファイルを保存して nginx を再起動する必要があります。

いくつかの nginx コマンドを送信します。nginx コマンドは nginx インストールディレクトリにある必要があります。cmd はコントロールパネルを開き、コマンドを使用します。

查看版本
nginx -v
开启nginx服务
start nginx
重启服务
nginx -s reload
关闭服务
nginx -s stop

記事ももう終わりに近づいていますが、お役に立てれば幸いです~