如何部署單頁面專案到伺服器

今天做vue單頁專案，在本地dev環境下一切正常，準備部署到生產環境，結果發現頁面一片空，想了許久，都不知道是什麼問題。後來和後台同事交流，發現我的頁面並不是在伺服器根目錄，而是由子目錄。

最近好多夥伴說，我用vue做的專案本地是可以的，但部署到伺服器遇到好多問題：資源找不到，直接訪問index.html頁面空白，重新整理當前路由404......用react做的專案也同樣遇到類似問題。現在我們一起討論下單頁面如何部署到伺服器？

由於前端路由緣故，單頁面應用應該放到nginx或者apache、tomcat等web**伺服器中，千萬不要直接訪問index.html，同時要根據自己伺服器的專案路徑更改react或vue的路由位址。

如果說專案是直接跟在網域名稱後面的，比如: ，根路由就是 '/'。

如果說專案是直接跟在網域名稱後面的乙個子目錄中的，比如:/children ，根路由就是 '/children '，不能直接訪問index.html。

以配置nginx為例，配置過程大致如下：（假設：

1、專案檔案目錄：/mnt/html/spa（spa目錄下的檔案就是執行了npm run dist 後生成的dist目錄下的檔案）

2、訪問網域名稱：spa.sosout.com）

進入nginx.conf新增如下配置：

server location / access_log /mnt/logs/nginx/access.log main;

}

注意事項：

1、配置網域名稱的話，需要80埠，成功後，只要訪問網域名稱即可訪問的專案

2、如果你使用了react-router的 browserhistory 模式或 vue-router的 history 模式，在nginx配置還需要重寫路由：

server location / location @fallback access_log /mnt/logs/nginx/access.log main;

}

為什麼要重寫路由？因為我們的專案只有乙個根入口，當輸入類似/home的url時，如果找不到對應的頁面，nginx會嘗試載入index.html，這是通過react-router或vue-router就能正確的匹配我們輸入的/home路由，從而顯示正確的home頁面，如果browserhistory模式或history模式的專案沒有配置上述內容，會出現404的情況。

簡單舉兩個例子，乙個vue專案乙個react專案：

vue專案

網域名稱：path: '/',

children: [,

}, }, , , ]

}]

############ # 其他配置 # 其他配置 ############

}

react專案

網域名稱：

/**
* 疑惑一：
* react createclass 和 extends react.component 有什麼區別?
* 之前寫法：
*      getinitialstate: function()
*  })
* es6寫法(通過es6類的繼承實現時state的初始化要在constructor中宣告)：
* class examplecomponent extends react.component 
*    }
* }*/
import react,  from 'react'; // react核心
import  from 'react-router'; // 建立route所需
import config from '../config/index';
import layout from '../component/layout/layout'; // 布局介面
import login from '../containers/login/login'; // 登入介面
/** * (路由根目錄元件，顯示當前符合條件的元件)
*  * @class roots
* @extends 
*/class roots extends component );}
}// const history = process.env.node_env !== 'production' ? browserhistory : hashhistory;
// 快速入門
const home = (location, cb) => , 'home');
cb(null, require('../containers/charts/lines').default)
}, 'chartline');
}// 基礎元件-按鈕
const button = (location, cb) => , 'button');
}// 基礎元件-圖示
const icon = (location, cb) => , 'icon');
}// 使用者管理
const user = (location, cb) => , 'user');
}// 系統設定
const setting = (location, cb) => , 'setting');
}// 廣告管理
const adver = (location, cb) => , 'adver');
}// 元件一
const oneui = (location, cb) => , 'oneui');
}// 元件二
const twoui = (location, cb) => , 'twoui');
}// 登入驗證
const requireauth = (nextstate, replace) => 
});}
}const routeconfig = (
"/home" component= onenter=>
// 預設載入的元件，比如訪問www.test.com,會自動跳轉到www.test.com/home
"/home" getcomponent= onenter= />
"/chart/line" getcomponent= onenter= />
"/general/button" getcomponent= onenter= />
"/general/icon" getcomponent= onenter= />
"/user" getcomponent= onenter= />
"/setting" getcomponent= onenter= />
"/adver" getcomponent= onenter= />
"/ui/oneui" getcomponent= onenter= />
"/ui/twoui" getcomponent= onenter= />
"/login" component=> // 所有的訪問，都跳轉到roots
// 預設載入的元件，比如訪問www.test.com,會自動跳轉到www.test.com/home
"*" to="/home" />
);export default routeconfig;

############ # 其他配置 # 其他配置 ############

}

如何部署單頁面專案到伺服器

部署專案到伺服器

專案部署到伺服器

如何把 Hugo 專案部署到伺服器

如何部署單頁面專案到伺服器

部署專案到伺服器

專案部署到伺服器

如何把 Hugo 專案部署到伺服器

相關推薦