vue打包并部署到nginx上的實現(xiàn)示例

更新時間：2024年01月24日 14:24:33 作者：不想掉頭發(fā)?。?！

本文主要介紹了vue打包并部署到nginx上的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一、打包vue項目

打包的命令依據(jù)項目的配置可能會有所不同，打包的命令可以在package.json中查看

在這里插入圖片描述

項目中vue.config.js中的配置如下：
proxy關(guān)系到我們項目部署到nginx上需要配置對應的反向代理

在這里插入圖片描述

publicPath關(guān)系到我們部署時是否需要配置子路徑

默認情況下，將應用將被部署在域的根目錄下,
例如：https://www.my-app.com/
那么publicPath就為：/
如果您的應用程序部署在子路徑中，則需要在這指定子路徑
例如：https://www.foobar.com/my-app/
那么publicPath就為：/my-app/
打開終端輸入一下命令：

npm run build

打包后生成的dist文件夾：

在這里插入圖片描述

將生成的dist文件夾整個移到nginx中的html文件夾中：

在這里插入圖片描述

二、nginx配置

打開nginx目錄下的、conf文件夾下的nginx.conf文件

在這里插入圖片描述

進行配置：

    server {
        listen       9800; # 這里配置的是打開的端口號
        server_name  localhost; # 這個配置打開時的域名，由于是本地部署就直接使用localhost

        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
               # 項目所在路徑，由于我們是一整個打包后的dist文件夾放到html目錄下的，所以我們的路徑就是html/dist/, 注意最后面必須加/
               root   html/dist/;  #項目所在路徑，最后面必須加/
               index  index.html index.htm;
               # 匹配項目的入口頁，因為是dist文件夾下的，所以路徑是/dist/index.html, 注意前面必須加/
               try_files $uri $uri/ /dist/index.html;  #匹配項目的入口頁，前面必須加/
        }
        # 下面的是反向的代理，解決跨域問題
        # ^~/api/sjjh/    ^~/api/ 與我們的vue.config.js中proxy是一一對應的
        # proxy_pass 是我們真實對應的 請求地址
        location ^~/api/sjjh/ {
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $remote_addr;
             proxy_pass xxxx;
        }
        location ^~/api/ {
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $remote_addr;
             proxy_pass xxxxx;
        }
      }

配置完成后進行保存，啟動，可以點擊nginx.exe進行啟動