Vue實(shí)戰(zhàn)091：Vue項(xiàng)目部署到nginx服務(wù)器

目開發(fā)完成之后我們就需要將項(xiàng)目上線運(yùn)行供用戶訪問，這時(shí)候我們就需要將項(xiàng)目部署到服務(wù)器上。對(duì)于Vue這種前端Web項(xiàng)目我們一般都部署在linux系統(tǒng)上，Linux常見的Web應(yīng)用服務(wù)器有Apache、Nginx和Tomcat 。Nginx是一款高性能、低消耗的輕量級(jí)反代理服務(wù)器很適合中小型項(xiàng)目，這里選擇Nginx服務(wù)器來部署Vue項(xiàng)目。

打包Vue項(xiàng)目

項(xiàng)目發(fā)布之前我們需要先將項(xiàng)目進(jìn)行打包，Vue腳手架是利用webpack將前端代碼通過編譯、壓縮，合并等操作，將代碼進(jìn)行整合優(yōu)化并生成瀏覽器可直接識(shí)別的文件（如html，css，fonts、img、js等）。具體的打包介紹可以參考文章【Vue實(shí)戰(zhàn)074：你真的了解了項(xiàng)目打包么？來普及下吧！】，這里我們直接通過命令：npm run build對(duì)vue項(xiàng)目進(jìn)行打包，打包之后會(huì)在項(xiàng)目根目錄生成一個(gè)dist 文件夾用來存放打包編譯的文件。

Callback was already called錯(cuò)誤

Vue-cli3.0在打包的時(shí)候會(huì)自動(dòng)將js和css分開打包，把所有的css樣式打包成一個(gè)個(gè)css文件。如果打包的時(shí)候遇到錯(cuò)誤：Callback was already called，vue.config.js文件中配置css: {extract: false}}。該配置指定css是否使用分離插件ExtractTextPlugin（默認(rèn)為true），將extract改成false則會(huì)將樣式強(qiáng)制內(nèi)聯(lián)不生成單獨(dú)的css文件。

Nginx測(cè)試

我們可以在Windows上用Nginx先測(cè)試下是否能正常的訪問，在Windows使用Nginx可以參考文章【Nginx實(shí)戰(zhàn)001：Window中配置使用Nginx入門】。將打包好的項(xiàng)目拷貝到nginx的html目錄中，啟動(dòng)nginx并在瀏覽器地址欄輸入網(wǎng)址 http://localhost:80訪問項(xiàng)目。

Nginx服務(wù)部署

在本地測(cè)試沒問題我們既可以開始部署了，先在服務(wù)器上安裝nginx。Centos安裝Nginx跟Ubuntu安裝基本一樣，這里就不再重復(fù)了，有需要可以參考文章【Linux實(shí)戰(zhàn)008：Ubuntu搭建Nginx服務(wù)器詳細(xì)圖解】。我們把打包好的文件上傳到nginx的html目錄中（該目錄一般在/usr/share/nginx/html），利用finalshell等工具可以快速將文件上傳到服務(wù)器指定目錄。

修改Nginx配置

docker的nginx基礎(chǔ)配置文件一般存放在/etc/nginx文件夾下的nginx.conf文件中，默認(rèn)的配置default.conf也存放在這里。我們的服務(wù)器配置就放在default.conf中，用戶可以根據(jù)自己的項(xiàng)目需求來配置nginx。通過vim修改好之后執(zhí)行命令:wq保存退出，再執(zhí)行命令：sudo ./nginx -s reload重啟下nginx即可（docker可以重啟容器）。

總結(jié)：

Nginx默認(rèn)配置的監(jiān)聽端口為80，如果當(dāng)前端口已經(jīng)被占用的話就可以在這里進(jìn)行修改。具體的配置按照自己的項(xiàng)目需求進(jìn)行修改，一般我們都在server中進(jìn)行配置（一個(gè)server代表一個(gè)服務(wù)站點(diǎn)，可以配置多個(gè)server節(jié)點(diǎn)搭建多個(gè)站點(diǎn)）。以上內(nèi)容是小編給大家分享的【Vue實(shí)戰(zhàn)091：Vue項(xiàng)目部署到nginx服務(wù)器】。希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。更多Vue實(shí)戰(zhàn)技巧可以參考以下專欄：

為了方便學(xué)習(xí)，下面附上本文用到的源碼：

、前言

最近想要部署一個(gè)純前端的靜態(tài)頁面，項(xiàng)目的內(nèi)容很簡(jiǎn)單，也就是一些簡(jiǎn)單的html、css、js、jpg、mp3等靜態(tài)資源，不涉及后端開發(fā)。

之前一直都是使用Tomcat來部署項(xiàng)目的，因?yàn)樯婕昂蠖私涌诘确矫娴膬?nèi)容，這次再用它來部署純前端的東西，顯得大材小用，過于笨重。

此時(shí)，使用nginx，便是最合適的選擇了，輕量、簡(jiǎn)單、靈活。

二、nginx安裝下載

我的服務(wù)器是在騰訊云上買的，操作系統(tǒng)是Centos，Linux中的一種。

安裝使用自帶的命令yum即可

yum install nginx

三、nginx配置

安裝完，nginx的相關(guān)目錄就都有了，最重要的一個(gè)配置文件nginx.conf在于

/etc/nginx/nginx.conf

我們一般在這里配置完項(xiàng)目的相關(guān)信息的配置，如訪問權(quán)限、訪問端口、訪問機(jī)器、訪問項(xiàng)目、訪問文件等：

#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.這里監(jiān)聽我們常用的80端口
        listen       80;
    #3.這里配置機(jī)器地址，一般是本機(jī)localhost
        server_name  localhost;
    #4.這里配置項(xiàng)目根路徑
        root         /root/love;
    #5.這里配置項(xiàng)目的訪問頁面
	   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 {
        }
    }
}