在nginx 服務器部署vue項目

以人人快速開發的開源項目：renren-fast-vue 為例

注：這里開始認為各位都會使用nginx 

打包vue項目

npm run build

測試打包的項目是否可以運行

serve dist

 可以正常運行

編譯報錯請移步到：renren-fast-vue@1.2.2 項目編譯報錯: build `gulp`

部署vue項目到nginx

接下來將renren-fast-vue 項目生成的dist 目錄修改為：renren-fast-vue 並壓縮為：renren-fast-vue.zip

復制renren-fast-vue.zip 到服務器

解壓到：/usr/local/nginx/

vue項目的nginx配置文件不直接在nginx.conf中進行配置，將配置保存在/usr/local/nginx/conf/vhost/renren-fast-vue.conf

配置內容為：vi /usr/local/nginx/conf/vhost/renren-fast-vue.conf

server {
        listen   7000;
        server_name  www.renrenfastvue.com;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        #項目的根目錄
        root /usr/local/nginx/renren-fast-vue;

        #網站根入口
        location / {
            # 此處的 @router 實際上是引用下面的轉發，否則在 Vue 路由刷新時可能會拋出 404
            try_files $uri $uri/ @router;
            # 請求指向的首頁
            index index.html;
        }

        # 由於路由的資源不一定是真實的路徑，無法找到具體文件
        # 所以需要將請求重寫到 index.html 中，然后交給真正的 Vue 路由處理請求資源
        location @router {
                rewrite ^.*$ /index.html last;
        }
}

將renren-fast-vue項目的配置文件：/usr/local/nginx/conf/vhost/renren-fast-vue.conf 導入到nginx.conf

vi /usr/local/nginx/conf/nginx.conf
在nginx.conf中http塊導入文件的指令
include ./vhost/renren-fast-vue.conf

管理nginx

檢查語法：nginx -t
啟動：nginx
重啟：nginx -s reload
停止：nginx -s stop

測試服務

檢查nginx 監聽的端口是否啟動成功：netstat -anp|grep nginx
測試renren-fast-vue的首頁是否可以訪問：curl -I http://127.0.0.1:7000/

到目前為止vue項目部署成功了，接下來通過瀏覽器，用域名訪問

域名為：server_name www.renrenfastvue.com;

在windows 的 C:\Windows\System32\drivers\etc\hosts 文件配置DNS 域名解析

 在瀏覽器地址欄輸入：http://www.renrenfastvue.com:7000/

登錄的默認賬號密碼是：admin

 ps：如果監聽端口為80，則不需要在域名后面添加端口

 

歡迎收藏點贊

 轉載請指明出處：https://www.cnblogs.com/dennyLee2025/p/13686498.html