Vue-cliプロジェクトをNgixサーバに展開する方法

0.Ngix使用
windows版を例にして、niging x圧縮パッケージをダウンロードして、任意のディレクトリに解凍して、nginx.exeをダブルクリックして、ブラウザの中でhttp://localhostに訪問して、もしWelcome to nginxが現れたら！ページは成功を説明します。
nginx一般的なコマンドは以下の通りです。

nginx -h  #     
nginx -t  #           

#          nginx    
nginx -s stop #   
nginx -s quit #   
nginx -s reopen #     （            ）
nginx -s reload #         

1.展開項目からNgixルートディレクトリまで
vue-cliで作成したプロジェクトについて、vue.co.fig.jsファイルを修正します。（プロジェクトのルートディレクトリの下にあります。ない場合は自分で作成します。）

module.exports = {
 //           
 devServer: {
 port: 8001
 },
 //     map  （map                  ）
 productionSourceMap: false,
 //             
 publicPath: process.env.NODE_ENV === 'production'
 ? '/'
 : '/my/',
 configureWebpack: (config) => {
 //    iview-loader
 config.module.rules[0].use.push({
  loader: 'iview-loader',
  options: {
  prefix: false
  }
 })
 //        vue inspect > o.js         webpack    
 }
}

vueプロジェクトのルートディレクトリでコマンドnpm run buildを使って出力ファイルを作成し、distフォルダの下のすべてのコンテンツをnginxディレクトリの下のwebapp/内にコピーします。
nginxディレクトリのconf/nginx.co nfファイルを修正し、http->serverノードでlocationセクションの内容を修正する。

location / {
 root webapp;
 index index.html index.htm;
}

inxルートディレクトリでコマンドnginx-s reloadを使用すれば、ブラウザからhttp://localhostを介してアイテムにアクセスできます。
2.複数のプロジェクトをNgixに展開する
場合によっては、いくつかのサブプロジェクトがNgix中に置かれており、異なるプロジェクトを異なる経路で訪問する必要があります。
プロジェクト1について、vue.co nfig.jsファイルのpublicPathを修正する：publicPath: '/vue1/'プロジェクト2に対して、vue.co.nfig.jsファイルのpublicPathを修正する：publicPath: '/vue2/'vueプロジェクトのルートディレクトリでコマンドnpm run buildを使って出力ファイルを作成し、distフォルダの下のすべてのコンテンツをnginxディレクトリの下のwebapp/vue 1とwebapp/vue 2にコピーします。
nginxディレクトリのconf/nginx.co nfファイルを修正し、http->serverノードでlocationセクションの内容を修正する。

location /vue1 {
 root webapp;
 index index.html index.htm;
}

location /vue2 {
 root webapp;
 index index.html index.htm;
}

inxルートディレクトリでコマンドnginx-s reloadを使用すれば、ブラウザでhttp://localhost/vue1、http://localhost/vue2を介してプロジェクト1、プロジェクト2にアクセスできます。
3.ポートエージェント
現在の後端項目はそれぞれ同じマシンに展開されている場合、同じポートを使用できないため、後端は一般的にポート番号を異なる値（例えば8080）に設定しているが、現在端が後端にリソースを要求する時にエンドスローガンを付けるのは面倒なので、先端の指定経路を後端の8080ポートに代行することができる。
locationをconf/nginx.co nfファイルに追加します。

location /api {
 proxy_pass http://localhost:8080/api;
}

このように、現在のエンドアクセス／appiパスの場合、実際にアクセスするのはhttp://localhost:8080/apiパスです。
締め括りをつける
以上は小编で绍介したVue-cliプロジェクトをNgixサーバーに配置する方法です。皆さんに助けてほしいです。もし何か疑问がありましたら、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。