Vue實戰091：Vue項目部署到nginx服務器

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

打包Vue項目

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

Callback was already called錯誤

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

Nginx測試

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

Nginx服務部署

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

修改Nginx配置

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，便是最合適的選擇了，輕量、簡單、靈活。

二、nginx安裝下載

我的服務器是在騰訊云上買的，操作系統是Centos，Linux中的一種。

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

yum install nginx

三、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 {
        }
    }
}