材料：
1、VUE項目（本地已測）
2、nginx（linux版）
3、瀏覽器
過程：
1、編譯VUE項目
在項目根目錄下，執行npm run build，生成dist文件夾
復制dist中的static、index.html到服務器相應位置（自定義）
本文為：/home/xxx/vue_demo
2、nginx下載安裝過程：
登陸nginx.org網站，點擊右側download，下載開源穩定版本的nginx，本人下載為nginx-1.16.1
復制地址鏈接，在root下創建相應的文件夾，如：nginx
進入nginx下，執行命令，wget?http://nginx.org/download/nginx-1.16.1.tar.gz?
執行命令，tar -xvf?nginx-1.16.1.tar.gz ，解壓文件，生成nginx-1.16.1
進入nginx-1.16.1下，執行命令./configure --help | more，查看安裝nginx可用的參數列表，在此，本人選擇--prefix參數定義，nginx的安裝位置
執行命令./configure --prefix=/home/xxx/nginx
注意，此時，仍未出現/home/xxx/nginx文件夾
執行命令make，進行編譯
執行命令make install，進行安裝
轉換到/home/xxx/nginx，查看有以下文件夾存在：
client_body_temp? conf? fastcgi_temp? html? logs? proxy_temp? sbin? scgi_temp? uwsgi_temp
至此，nginx安裝完畢。（此種方式，為編譯安裝，支持按需擴展）
3、配置VUE項目，進行訪問
打開nginx下的conf，復制nginx.conf
命令cp nginx.conf nginx_vue.conf
命令vim nginx_vue.conf
修改server模塊下部分參數：
#監聽端口，瀏覽器訪問使用
listen 8080;
#服務器地址（域名、IP）
server_name localhost;
#charset koi8-r;
#進程運行日志的存儲地址
#access_log logs/host.access.log main;
#資源訪問配置（location后的表達式，支持正則）
location / {
# 項目所在位置
root /home/xxx/vue_demo;
#前端起始頁位置，支持多個（如下）
index index.html index.htm;
}
保存退出
4、nginx的相關命令
nginx文件夾下：
啟動：./sbin/nginx
根據配置文件啟動：./sbin/nginx -c?nginx_vue.conf(默認為nginx.conf)
停止：./sbin/nginx -s stop
退出：./sbin/nginx -s quit（優雅的停止）
重啟：./sbin/nginx -s reopen
重新加載配置文件：./sbin/nginx -s reload
查看幫助：./sbin/nginx -s -h
開啟服務器8080端口，支持外網訪問。瀏覽器訪問ip:port，至此結束！
本文內容轉載，轉載地址：https://www.cnblogs.com/tec-dream/p/12087887.html
