我們一般情況下將vue項目開發(fā)完成后會進行打包上線，本文介紹多種部署情況。

一、Apache服務器

1、vue路由mode:'hash'模式（帶#號模式）

hash模式打包后可以直接丟到服務器上去，不會有路由上的問題，接口的話根據(jù)項目的路徑寫個全局配置就行了，這里不詳細說。

2、vue路由mode:'history'模式（不帶#號模式）

vue在history模式打包時，如果項目為二級目錄，則在config→index.js→build→使用assetsPublicPath: '/dist/',在路由中，使用base: '/dist/'

否則為assetsPublicPath: '/dist/'

而對于打包完后css圖片路徑不對的情況：在build→utils.js→

(1)、部署于服務器根目錄

首先，我們使用build將項目打包會得到一個dist文件夾

，

直接打開其中的index.htm頁面會一片空白，但不會報錯。需要將文件放置于服務器根目錄，這里我用phpsyudy演示。

，

可是如果在其中某個路由刷新，則會出現(xiàn)404現(xiàn)象：

那是由于所有路由的入口都在index頁面，直接從中間進入會迷失方向。此時需要在后臺配置重定向方可解決。

apache需要修改httpd.conf：

• 第一步：將 LoadModule rewrite_module modules/mod_rewrite.so 打開,
• 第二步：修改Directory的AllowOverride為all，注意配置文件中有很多Directory，不要該錯了，否則不會生效的，Directory一定是你apache服務的根目錄。
• 第三步：文件最后添加：ErrorDocument 404 /index.html (也可寫在vhosts.ini的VirtualHost標簽的末尾)
• 結(jié)果：完美運行：

(2)、部署于服務器二級或多級目錄

當然，一臺服務器上的項目非常多，不可能都部署在根目錄，下面來部署二級目錄

我們將服務器的根目錄設置為two:

這是因為你的項目打包dist并不是你服務器訪問的跟目錄，訪問是http://xxx.xxx.com/dist，跟目錄訪問：http://xxx.xxx.com；由于包并不是根目錄router路由無法找到路徑中的組件，解決方法：

方法一：

需要修改router中的index.js路由部分，在每個path中加上你項目名稱就行了，這樣就能夠成功了

{
path: '/dist/',
redirect: '/dist/asd'
}?

方法二：

{
path: '/',
redirect: '/asd'
}（不變）

在mode: 'history',之后添加

base: '/dist/',（推薦使用）

注意：配置里也要改成相應的ErrorDocument 404 /dist/index.html

如果index.html 可以正常訪問，但是引用的js，css等文件服務器響應均為404，則有可能打包后的資源使用了絕對根目錄路徑，因此將項目部署到特定目錄下，其引入的資源路徑無法被正確解析。

解決辦法：

1、修改config => index.js => build => assetsPublicPath 中的'/'成為'./'

2、在build => util.js 里找到ExtractTextPlugin.extract增加一行：publicPath: '../../'，主要解決背景圖片路徑的問題。

結(jié)果：

(3)、部署多個vue項目（推薦）

以上皆是配置于服務器根目錄，但是如果我有多個vue項目要上線呢，這時就要用到.htaccess文件了。

我們打包兩個dist文件，第二個取名dist2，，在每個項目的根目錄(不是服務器根目錄哦)，新建.htaccess，里面寫上

ErrorDocument 404 /dist/index.html和ErrorDocument 404 /dist2/index.html就行了，記得把相應的配置表里的設置刪掉，不然會沖突。

結(jié)果：

二、nginx服務器

1、vue路由mode:'hash'模式（帶#號模式）

hash模式打包后可以直接丟到服務器上去，不會有路由上的問題，接口的話根據(jù)項目的路徑寫個全局配置就行了，這里不詳細說。線上代理這里也不說了。

2、vue路由mode:'history'模式（不帶#號模式）

(1)、部署于服務器根目錄

在vhosts.conf里配置：

server {
        listen       80;
        server_name  www.2.com 2.com;
        root   "C:\Users\Administrator\Desktop\dist_root";
        location / {
		root   C:\Users\Administrator\Desktop\dist_root;
            index  index.html index.htm index.php;
            error_page 404 /index.html;
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
}

方法二：

location /{
 
        root   C:\Users\Administrator\Desktop\dist_root;;
        index  index.html index.htm;
 
        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }

(1)、部署于服務器二級目錄

location /wx{
 
        root   C:\Users\Administrator\Desktop\dist_two;
        index  index.html index.htm;
 
        #error_page 404 /wx/index.html;
        if (!-e $request_filename) {
            rewrite ^/(.*) /wx/index.html last;
            break;
        }
    }

對于同一服務器下多個vue項目，設置也比較簡單

location /dist {
		root   C:\Users\Administrator\Desktop\dist_two;
        index  index.html index.htm index.php;
        #error_page 404 /dist/index.html;
		if (!-e $request_filename) {
            rewrite ^/(.*) /dist/index.html last;
           	break;
        }
}
location /dist2 {
		root   C:\Users\Administrator\Desktop\dist_two;
           index  index.html index.htm index.php;
           #error_page 404 /dist2/index.html;
		if (!-e $request_filename) {
           rewrite ^/(.*) /dist2/index.html last;
           break;
        }
}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論