目開發完成之后我們就需要將項目上線運行供用戶訪問,這時候我們就需要將項目部署到服務器上。對于Vue這種前端Web項目我們一般都部署在linux系統上,Linux常見的Web應用服務器有Apache、Nginx和Tomcat 。Nginx是一款高性能、低消耗的輕量級反代理服務器很適合中小型項目,這里選擇Nginx服務器來部署Vue項目。
項目發布之前我們需要先將項目進行打包,Vue腳手架是利用webpack將前端代碼通過編譯、壓縮,合并等操作,將代碼進行整合優化并生成瀏覽器可直接識別的文件(如html,css,fonts、img、js等)。具體的打包介紹可以參考文章【Vue實戰074:你真的了解了項目打包么?來普及下吧!】,這里我們直接通過命令:npm run build對vue項目進行打包,打包之后會在項目根目錄生成一個dist 文件夾用來存放打包編譯的文件。
Vue-cli3.0在打包的時候會自動將js和css分開打包,把所有的css樣式打包成一個個css文件。如果打包的時候遇到錯誤:Callback was already called,vue.config.js文件中配置css: {extract: false}}。該配置指定css是否使用分離插件ExtractTextPlugin(默認為true),將extract改成false則會將樣式強制內聯不生成單獨的css文件。
我們可以在Windows上用Nginx先測試下是否能正常的訪問,在Windows使用Nginx可以參考文章【Nginx實戰001:Window中配置使用Nginx入門 】。將打包好的項目拷貝到nginx的html目錄中,啟動nginx并在瀏覽器地址欄輸入網址 http://localhost:80訪問項目。
在本地測試沒問題我們既可以開始部署了,先在服務器上安裝nginx。Centos安裝Nginx跟Ubuntu安裝基本一樣,這里就不再重復了,有需要可以參考文章【Linux實戰008:Ubuntu搭建Nginx服務器詳細圖解】。我們把打包好的文件上傳到nginx的html目錄中(該目錄一般在/usr/share/nginx/html),利用finalshell等工具可以快速將文件上傳到服務器指定目錄。
docker的nginx基礎配置文件一般存放在/etc/nginx文件夾下的nginx.conf文件中,默認的配置default.conf也存放在這里。我們的服務器配置就放在default.conf中,用戶可以根據自己的項目需求來配置nginx。通過vim修改好之后執行命令:wq保存退出,再執行命令:sudo ./nginx -s reload重啟下nginx即可(docker可以重啟容器)。
Nginx默認配置的監聽端口為80,如果當前端口已經被占用的話就可以在這里進行修改。具體的配置按照自己的項目需求進行修改,一般我們都在server中進行配置(一個server代表一個服務站點,可以配置多個server節點搭建多個站點)。以上內容是小編給大家分享的【Vue實戰091:Vue項目部署到nginx服務器】。希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄:
為了方便學習,下面附上本文用到的源碼:
最近想要部署一個純前端的靜態頁面,項目的內容很簡單,也就是一些簡單的html、css、js、jpg、mp3等靜態資源,不涉及后端開發。
之前一直都是使用Tomcat來部署項目的,因為涉及后端接口等方面的內容,這次再用它來部署純前端的東西,顯得大材小用,過于笨重。
此時,使用nginx,便是最合適的選擇了,輕量、簡單、靈活。
我的服務器是在騰訊云上買的,操作系統是Centos,Linux中的一種。
安裝使用自帶的命令yum即可
yum install nginx
安裝完,nginx的相關目錄就都有了,最重要的一個配置文件nginx.conf在于
/etc/nginx/nginx.conf
我們一般在這里配置完項目的相關信息的配置,如訪問權限、訪問端口、訪問機器、訪問項目、訪問文件等:
#1.注意user使用root,以便輕松訪問任何文件
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
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 /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
include /etc/nginx/conf.d/*.conf;
server {
#2.這里監聽我們常用的80端口
listen 80;
#3.這里配置機器地址,一般是本機localhost
server_name localhost;
#4.這里配置項目根路徑
root /root/love;
#5.這里配置項目的訪問頁面
index index.html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
}
配置完畢,我們便可啟動nginx,完成部署,如果期間修改配置文件,我們則在reload下即可,下面羅列下幾個常用的命令:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。