Vue項目前端部署詳細步驟(nginx方式)
更新時間：2023年09月18日 09:11:55 作者：小小菜菜程序員
Nginx(engine x)是一個高性能的HTTP和反向代理web服務(wù)器,是部署前端項目的首選,這篇文章主要給大家介紹了關(guān)于Vue項目前端部署(nginx方式)的相關(guān)資料,需要的朋友可以參考下
1. 準備好服務(wù)器，下載安裝nginx并啟動
隨便在網(wǎng)上找一篇文章，下載安裝之后，啟動nginx
2. vue項目編譯打包
在項目根目錄下 運行npm run build 進行編譯打包
打包完成之后，在項目根目錄下會多一個dist目錄
3. 將dist目錄上傳到服務(wù)器上
4. 配置nginx安裝目錄下的nginx.config文件
因為使用到nginx進行代理，所以vue.config.js里面的代理是不會生效的，我們使用nginx來配置反向代理,配置完成保存文件
server {
listen 3012; #訪問端口
server_name localhost;
location / {
root /xx/xx/xx/dist; #前端dist包地址
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /ele/ {
proxy_set_header x-forwarded-for $remote_addr;
proxy_pass http://xx.xx.xx.xx:8080/; #后端代理地址
}
charset utf-8;
}5. 重啟nginx
使用service nginx restart 或則 nginx -s reload 進行nginx重啟
6. 訪問地址
地址為服務(wù)器地址，端口是nginx配置的訪問端口，因為我配置的是3012，所以直接 ip:3012即可。如果首頁有其他路由，可以使用ip:3012/router的方式，比如首頁路由是/index 訪問地址就是ip:3012/index
總結(jié)
到此這篇關(guān)于Vue項目前端部署(nginx方式)的文章就介紹到這了,更多相關(guān)Vue項目前端部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在本篇文章里小編給大家整理的是一篇關(guān)于Vue+ElementUI怎么處理超大表單實例講解內(nèi)容，以后需要的朋友可以跟著學(xué)習(xí)參考下。2021-11-11
vue3是一個流行的前端框架,vite是一個快速的構(gòu)建工具,下面這篇文章主要給大家介紹了關(guān)于vue3+vite項目跨域配置踩坑實戰(zhàn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue引入jquery實現(xiàn)平滑滾動到指定位置的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了vue中常見循環(huán)遍歷指令的使用 v-for，包括v-for遍歷數(shù)組，v-for遍歷json對象,本文給大家介紹的非常詳細，需要的朋友可以參考下2018-04-04
Vue金融數(shù)字格式化(并保留小數(shù))數(shù)字滾動效果實現(xiàn)
這篇文章主要介紹了Vue金融數(shù)字格式化(并保留小數(shù)) 數(shù)字滾動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了vue自定義指令三步如何實現(xiàn)數(shù)據(jù)拉取更新,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)彈窗拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器,其實Pinia就是Vuex5,只不過為了尊重原作者的貢獻就沿用了名字Pinia,下面這篇文章主要給大家介紹了關(guān)于Vue.js狀態(tài)管理之Pinia與Vuex的相關(guān)資料,需要的朋友可以參考下2023-02-02
最近寫代碼遇到一問題祖先級別的組件怎么操作孫子的兒子的組件方法，在網(wǎng)上搜了半天都是父子傳參，父子操作，暈暈乎乎的想起了bus，接下來通過本文給大家介紹vue?祖先組件操作后代組件方法,需要的朋友可以參考下2022-11-11
Vue2.0實現(xiàn)將頁面中表格數(shù)據(jù)導(dǎo)出excel的實例
本篇文章主要介紹了Vue2.0實現(xiàn)將頁面中表格數(shù)據(jù)導(dǎo)出excel的實例，非常具有實用價值，感興趣的同學(xué)可以了解一下2017-08-08