vue項目打包部署nginx(linux)


材料:

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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM