快捷導(dǎo)航

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

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

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

一、打包vue項(xiàng)目

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

在這里插入圖片描述

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

在這里插入圖片描述

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

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

npm run build

打包后生成的dist文件夾：

在這里插入圖片描述

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

在這里插入圖片描述

二、nginx配置

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

在這里插入圖片描述

進(jìn)行配置：

    server {
        listen       9800; # 這里配置的是打開的端口號(hào)
        server_name  localhost; # 這個(gè)配置打開時(shí)的域名，由于是本地部署就直接使用localhost

        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
               # 項(xiàng)目所在路徑，由于我們是一整個(gè)打包后的dist文件夾放到html目錄下的，所以我們的路徑就是html/dist/, 注意最后面必須加/
               root   html/dist/;  #項(xiàng)目所在路徑，最后面必須加/
               index  index.html index.htm;
               # 匹配項(xiàng)目的入口頁(yè)，因?yàn)槭莇ist文件夾下的，所以路徑是/dist/index.html, 注意前面必須加/
               try_files $uri $uri/ /dist/index.html;  #匹配項(xiàng)目的入口頁(yè)，前面必須加/
        }
        # 下面的是反向的代理，解決跨域問(wèn)題
        # ^~/api/sjjh/    ^~/api/ 與我們的vue.config.js中proxy是一一對(duì)應(yīng)的
        # proxy_pass 是我們真實(shí)對(duì)應(yīng)的 請(qǐng)求地址
        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;
        }
      }

配置完成后進(jìn)行保存，啟動(dòng)，可以點(diǎn)擊nginx.exe進(jìn)行啟動(dòng)