Vue項(xiàng)目打包并部署nginx服務(wù)器的詳細(xì)步驟
使用場(chǎng)景:
我們常使用前后端分離項(xiàng)目時(shí),會(huì)需要將前端vue打包然后部署。
一.打包
vue項(xiàng)目其實(shí)可以直接通過(guò)一下語(yǔ)句進(jìn)行打包:
npm run build
默認(rèn)打包情況如下:


當(dāng)我們需要將打包名稱以及靜態(tài)資源位置進(jìn)行修改時(shí)便需要進(jìn)行相應(yīng)的配置:
1.首先在項(xiàng)目根目錄下創(chuàng)建vue.config.js文件

配置內(nèi)容如下所示(附帶跨域問(wèn)題解決):
module.exports = {
//打包
publicPath: './',
outputDir: 'test', //打包輸出目錄
assetsDir: './static', //放置生成的靜態(tài)資源
filenameHashing: true, // 生成的靜態(tài)資源在它們的文件名中包含了 hash 以便更好的控制緩存
lintOnSave: false, //設(shè)置是否在開發(fā)環(huán)境下每次保存代碼時(shí)都啟用 eslint驗(yàn)證
productionSourceMap: false,// 打包時(shí)不生成.map文件
// 解決跨域配置
devServer: { //記住,別寫錯(cuò)了devServer//設(shè)置本地默認(rèn)端口 選填
port: 8080,
proxy: { //設(shè)置代理,必須填
'/api': { //設(shè)置攔截器 攔截器格式 斜杠+攔截器名字,名字可以自己定
target: 'http://localhost:9090', //代理的目標(biāo)地址(后端設(shè)置的端口號(hào))
changeOrigin: true, //是否設(shè)置同源,輸入是的
pathRewrite: { //路徑重寫
'/api': '' //選擇忽略攔截器里面的單詞
}
/*也就是在前端使用/api可以直接替換為(http://localhost:9090)*/
}
}
},
}2.查看路由中(router/index.js)是否使用history,是的話修改為hash?;蛘邔ode直接注掉,因?yàn)槟J(rèn)使用hash。
const router = new VueRouter({
/*mode: 'history',*/
mode: 'hash',
routes:[]
})
export default router然后再次使用npm run build進(jìn)行打包就會(huì)出現(xiàn)test文件夾,已經(jīng)其中靜態(tài)文件會(huì)放置到static中。
到此打包已經(jīng)結(jié)束。
3.找到打包后文件的路徑
雙擊打包好的index.html文件,就可以看到是首頁(yè)了。
二.部署(nginx)
首先需要安裝nignx,這個(gè)毋庸置疑這里就不介紹。(或者后續(xù)會(huì)在nginx板塊放置具體安裝步驟)
直接在nginx.conf中進(jìn)行配置即可:
server {
listen 8021;
server_name localhost;
location /test{
alias /home/hyq/vue_file;
index index.shtml index.html index.htm;
}配置具體含義:
#user nobody;
worker_processes 1;
?
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
?
#pid logs/nginx.pid;
?
?
events {
worker_connections 1024;
}
?
http {
include mime.types;
default_type application/octet-stream;
?
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
?
#access_log logs/access.log main;
?
sendfile on;
#tcp_nopush on;
?
#keepalive_timeout 0;
keepalive_timeout 65;
?
#gzip on;
ssi on;
ssi_silent_errors on;
ssi_types text/shtml;
#定義的服務(wù)器列表
upstream cms {
#這里代表代理的項(xiàng)目端口為127.0.0.1:8111端口(weight等配置自行查詢)
server 127.0.0.1:8111 weight=5 max_fails=3 fail_timeout=20s;
}
server {
listen 8096; #nginx使用8096
server_name localhost; #服務(wù)名稱
?
location /menhu/cms {
proxy_pass http://cms;
#請(qǐng)求轉(zhuǎn)向cms 定義的服務(wù)器列表。也就是訪問(wèn)localhost:8096/menhu/cms 會(huì)轉(zhuǎn)向到上方服務(wù)器列 #表中的127.0.0.1:8111
}
?
location /qgxzzfzhgljdpt {
root D:\BDWorkParce3\LPT_MENHU\wwwroot_release; #根目錄
index index.shtml index.html index.htm; #設(shè)置默認(rèn)頁(yè)
#訪問(wèn)localhost:8096/qgxzzfzhgljdpt 會(huì)打開 D:\BDWorkParce3\LPT_MENHU\wwwroot_release\qgxzzfzhgljdpt下級(jí)中的index.shtml/index.html/index.htm默認(rèn)頁(yè)
}
location ^~ /template {
return 404;
}
location = /c/ {
return 404;
}
location = /css/ {
return 404;
}
location = /images/ {
return 404;
}
location = /include/ {
return 404;
}
location = /js/ {
return 404;
}
location = /style/ {
return 404;
}
location = /upload/ {
return 404;
}
location = /html/ {
return 404;
}
location = /root/ {
return 404;
}
location ~ .*.(svn|Git|git) {
return 404;
}
?
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
?
}
########### 每個(gè)指令必須有分號(hào)結(jié)束。#################
#user administrator administrators; #配置用戶或者組,默認(rèn)為nobody nobody。
#worker_processes 2; #允許生成的進(jìn)程數(shù),默認(rèn)為1
#pid /nginx/pid/nginx.pid; #指定nginx進(jìn)程運(yùn)行文件存放地址
error_log log/error.log debug; #制定日志路徑,級(jí)別。這個(gè)設(shè)置可以放入全局塊,http塊,server塊,級(jí)別以此為:debug|info|notice|warn|error|crit|alert|emerg
events {
accept_mutex on; #設(shè)置網(wǎng)路連接序列化,防止驚群現(xiàn)象發(fā)生,默認(rèn)為on
multi_accept on; #設(shè)置一個(gè)進(jìn)程是否同時(shí)接受多個(gè)網(wǎng)絡(luò)連接,默認(rèn)為off
#use epoll; #事件驅(qū)動(dòng)模型,select|poll|kqueue|epoll|resig|/dev/poll|eventport
worker_connections 1024; #最大連接數(shù),默認(rèn)為512
}
http {
include mime.types; #文件擴(kuò)展名與文件類型映射表
default_type application/octet-stream; #默認(rèn)文件類型,默認(rèn)為text/plain
#access_log off; #取消服務(wù)日志
log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #自定義格式
access_log log/access.log myFormat; #combined為日志格式的默認(rèn)值
sendfile on; #允許sendfile方式傳輸文件,默認(rèn)為off,可以在http塊,server塊,location塊。
sendfile_max_chunk 100k; #每個(gè)進(jìn)程每次調(diào)用傳輸數(shù)量不能大于設(shè)定的值,默認(rèn)為0,即不設(shè)上限。
keepalive_timeout 65; #連接超時(shí)時(shí)間,默認(rèn)為75s,可以在http,server,location塊。
?
upstream mysvr {
server 127.0.0.1:7878;
server 192.168.10.121:3333 backup; #熱備
}
error_page 404 https://www.baidu.com; #錯(cuò)誤頁(yè)
server {
keepalive_requests 120; #單連接請(qǐng)求上限次數(shù)。
listen 4545; #監(jiān)聽端口
server_name 127.0.0.1; #監(jiān)聽地址
location ~*^.+$ { #請(qǐng)求的url過(guò)濾,正則匹配,~為區(qū)分大小寫,~*為不區(qū)分大小寫。
#root path; #根目錄
#index vv.txt; #設(shè)置默認(rèn)頁(yè)
proxy_pass http://mysvr; #請(qǐng)求轉(zhuǎn)向mysvr 定義的服務(wù)器列表
deny 127.0.0.1; #拒絕的ip
allow 172.18.5.54; #允許的ip
}
}
}然后啟動(dòng)或者重啟nginx即可。
訪問(wèn):服務(wù)器地址:8021/test 即可。
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目打包并部署nginx服務(wù)器的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目打包部署nginx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue+Element實(shí)現(xiàn)網(wǎng)頁(yè)版?zhèn)€人簡(jiǎn)歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實(shí)現(xiàn)網(wǎng)頁(yè)版?zhèn)€人簡(jiǎn)歷系統(tǒng),需要的朋友可以參考下2019-12-12
用Vue.js實(shí)現(xiàn)監(jiān)聽屬性的變化
響應(yīng)系統(tǒng)是Vue.js的一個(gè)顯著功能,修改屬性,可以更新視圖,這讓狀態(tài)管理變得非常簡(jiǎn)單且直觀。這篇文章主要給大家介紹如何利用Vue.js實(shí)現(xiàn)觀察屬性的變化,有需要的朋友們可以參考借鑒,感興趣的朋友們下面來(lái)一起看看吧。2016-11-11
淺談Vue使用Elementui修改默認(rèn)的最快方法
這篇文章主要介紹了淺談Vue使用Elementui修改默認(rèn)的最快方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
vue實(shí)現(xiàn)樣式之間的切換及vue動(dòng)態(tài)樣式的實(shí)現(xiàn)方法
這篇文章主要介紹了vue中如何實(shí)現(xiàn)樣式之間的切換及vue動(dòng)態(tài)樣式的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
Vue-Access-Control 前端用戶權(quán)限控制解決方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 實(shí)現(xiàn)的前端用戶權(quán)限控制解決方案。這篇文章主要介紹了Vue-Access-Control:前端用戶權(quán)限控制解決方案,需要的朋友可以參考下2017-12-12
elementUI樣式修改未生效問(wèn)題詳解(掛載到了body標(biāo)簽上)
vue+elementUI項(xiàng)目開發(fā)中,經(jīng)常遇到修改elementUI組件樣式無(wú)效的問(wèn)題,這篇文章主要給大家介紹了關(guān)于elementUI樣式修改未生效問(wèn)題的相關(guān)資料,掛載到了body標(biāo)簽上,需要的朋友可以參考下2023-04-04
vue.js學(xué)習(xí)筆記之綁定style樣式和class列表
數(shù)據(jù)綁定一個(gè)常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下2016-10-10
使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)帶拖動(dòng)和播放功能的時(shí)間軸,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03

