材料:
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,至此結束!