在nginx伺服器部署vue專案

2021-10-04 06:15:00 字數 1562 閱讀 8734

1.加入.env.dev和.env.prod環境資訊

''//伺服器ip

2.request.js加入

import axios from


'axios'


import vue from


'vue'


const


request


=function


(query)).


catch


(err=>)}


const


post


=function


(url,params)


}return


request


(query)


}const


get=


function


(url,params)


}return


request


(query);}


export
3.在package.json中加入生產環境打包配置：

"scripts"


:,
注意：上面的build --mode dev中的dev是和.env.dev中的dev對應的，此時若要打包上線，控制台執行：yarn build:prod即可

4.在nginx中配置反向**：

先看vue.config.js中devserver配置：

devserver:}}


},
可以看到，在開發環境中api被**到了即介面伺服器的ip位址

開啟nginx中conf.d->default.conf:

server 


# 配置反向**


location /api 


#error_page 404 /404.html;


# redirect server error pages to the static page /50x.html


# error_page 500 502 503 504 /50x.html;


location = /50x.html 


}
注意：proxy_pass和devserver中的target: ''**資訊保持一致

在nginx 伺服器部署vue專案

以人人快速開發的開源專案 renren fast vue 為例 注 這裡開始認為各位都會使用nginx npm run build測試打包的專案是否可以執行 可以正常執行 編譯報錯請移步到 renren fast vue 1.2.2 專案編譯報錯 build gulp 接下來將renren fast...

Nginx伺服器部署

採用nginx原始碼安裝方式 1.將nginx 1.8.0.tar.gz上傳到 usr local 目錄下 tar zxvf nginx 1.8.0.tar.gz2.進入根目錄執行編譯檢查依賴環境是否滿足.configure cd usr local nginx 1.8.0 configure由於n...

vue專案部署到nginx伺服器

vue cli3 首先在專案根目錄建立乙個vue.config.js檔案 新增如下內容 module.export 然後 npm run build將vue打包後的dist資料夾放在nginx下的html資料夾即可。訪問 即可看到內容。注意 也可將dist資料夾改名為projectname，訪問 如...