vue項目部署到nginx服務


vue開發的項目,通過編譯會得到 dist文件夾,如何發布到nginx服務器上?

配置nginx服務器

在nginx服務文件中,打開 conf文件夾,如下

為了不改變nginx的默認配置(nginx.conf),復制一份,重名為 custom.conf,如下

修改 custom.conf 文件中的 root 參數為 custom,如下

 ......
    server {
        listen       80;  // 監聽端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   custom; // 項目的靜態文件夾
            index  index.html index.htm;
        }
 ......

根據上面修改的 root參數,在nginx服務器的根目錄下建立 custom文件夾,如下

通過命令行,按照自己建立的 custom.conf 配置,啟動nginx服務器,.\nginx -c .\conf\custom.conf

在 custom文件夾 中建立一個用來測試的 html文件(代碼如下),其中JS代碼用來測試nginx的反向代理,如下

<body>
    <h1>Welcome to custom!</h1>
    <p><em>Thank you for using nginx.</em></p>
    <script>
        fetch('/ajax/movieOnInfoList?token=&' +
            'optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&' +
            'optimus_risk_level=71&' +
            'optimus_code=10').then(res => res.json()).then(res => {
                console.log(res)
            })
    </script>
</body>

瀏覽器訪問 http://localhost:80,可以看到網頁正常訪問,但是並沒有使用nginx的反向代理獲取數據,如下

再次配置 custom.conf 文件,實現反向代理,如下

修改 custom.conf 文件中的 root 參數為 custom
``` javascript
 ......
    server {
        listen       80;  # 監聽端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   custom; # 項目的靜態文件夾
            index  index.html index.htm;
        }

        # 從nginx走的請求,以 /ajax 開頭,代理到https//m.maoyan.com服務器上
        location /ajax/ {  
            proxy_pass  https://m.maoyan.com;
        }
 ......

打開命令行,重啟 nginx,相關代碼如下,獲取https//m.maoyan.com的數據,如下

.\nginx -s stop       停止nginx服務 
.\nginx -s restart    重啟nginx服務
.\nginx -s reload     重啟加載nginx配置文件(推薦)

發布vue項目

將已經打包的 vue 項目 dist 文件夾里面的內容存放到 custom 文件夾中,重啟 nginx 服務器/重新加載 nginx 配置,完成配置


免責聲明!

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



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