如何部署單頁面項目到服務器

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

後來纔想起來曾經看過的一篇文章，內容以下：

最近好多夥伴說，我用vue作的項目本地是能夠的，但部署到服務器遇到好多問題：資源找不到，直接訪問index.html頁面空白，刷新當前路由404......用react作的項目也一樣遇到相似問題。如今咱們一塊兒討論下單頁面如何部署到服務器？

因爲前端路由緣故，單頁面應用應該放到nginx或者apache、tomcat等web代理服務器中，千萬不要直接訪問index.html，同時要根據本身服務器的項目路徑更改react或vue的路由地址。

若是說項目是直接跟在域名後面的，好比:http://www.sosout.com ，根路由就是 '/'。
若是說項目是直接跟在域名後面的一個子目錄中的，好比:http://www.sosout.com/children ，根路由就是 '/children '，不能直接訪問index.html。

 

以配置Nginx爲例，配置過程大體以下：（假設：
一、項目文件目錄： /mnt/html/spa（spa目錄下的文件就是執行了npm run dist 後生成的dist目錄下的文件）
二、訪問域名：spa.sosout.com）
進入nginx.conf新增以下配置：

server { 
     listen 80;
     server_name  spa.sosout.com;
     root /mnt/html/spa;    
     index index.html;    
     location ~ ^/favicon\.ico$ {      
         root /mnt/html/spa;     }    
         
     location / {        
         try_files $uri $uri/ /index.html;        
         proxy_set_header   Host             $host;        
         proxy_set_header   X-Real-IP        $remote_addr;        
         proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;        
         proxy_set_header   X-Forwarded-Proto  $scheme;     }    
     access_log  /mnt/logs/nginx/access.log  main; }

 

注意事項：

一、配置域名的話，須要80端口，成功後，只要訪問域名便可訪問的項目
二、若是你使用了react-router的 browserHistory 模式或 vue-router的 history 模式，在nginx配置還須要重寫路由：

 

server {    
    listen 80;    
    server_name  spa.sosout.com;    
    root /mnt/html/spa;
    index index.html;
    location ~ ^/favicon\.ico$ {        
        root /mnt/html/spa;    }
        
    location / {        
        try_files $uri $uri/ @fallback;
        index index.html;     
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;   
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for; 
        proxy_set_header   X-Forwarded-Proto  $scheme;    }
    location @fallback {    
        rewrite ^.*$ /index.html break;    }   
    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項目

域名：http://tb.sosout.com

import App from '../App'

// 首頁
const home = r => require.ensure([], () => r(require('../page/home/index')), 'home')

// 物流
const logistics = r => require.ensure([], () => r(require('../page/logistics/index')), 'logistics')

// 購物車
const cart = r => require.ensure([], () => r(require('../page/cart/index')), 'cart')

// 個人
const profile = r => require.ensure([], () => r(require('../page/profile/index')), 'profile')

// 登陸界面
const login = r => require.ensure([], () => r(require('../page/user/login')), 'login')

export default [{  path: '/',  component: App, // 頂層路由，對應index.html  children: [{    path: '/home', // 首頁    component: home  }, {    path: '/logistics', // 物流    component: logistics,    meta: {      login: true    }  }, {    path: '/cart', // 購物車    component: cart,    meta: {      login: true    }  }, {    path: '/profile', // 個人    component: profile  }, {    path: '/login', // 登陸界面    component: login  }, {    path: '*',    redirect: '/home'  }] }]

 

############
# 其餘配置
############

http {
    ############
    # 其餘配置
    ############
    server {
        listen 80;        server_name  tb.sosout.com;        root /mnt/html/tb;        index index.html;        location ~ ^/favicon\.ico$ {            root /mnt/html/tb;        }            location / {            try_files $uri $uri/ @fallback;            index index.html;            proxy_set_header   Host             $host;            proxy_set_header   X-Real-IP        $remote_addr;            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;            proxy_set_header   X-Forwarded-Proto  $scheme;        }        location @fallback {            rewrite ^.*$ /index.html break;        }        access_log  /mnt/logs/nginx/access.log  main;    }    ############    # 其餘配置    ############   }

 

react項目

域名：http://antd.sosout.com

/** * 疑惑一： * React createClass 和 extends React.Component 有什麼區別? * 以前寫法： * let app = React.createClass({ *      getInitialState: function(){ *        // some thing *      } *  }) * ES6寫法(經過es6類的繼承實現時state的初始化要在constructor中聲明)： * class exampleComponent extends React.Component { *    constructor(props) { *        super(props); *        this.state = {example: 'example'} *    } * } */

import React, {Component, PropTypes} from 'react'; // react核心
import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from 'react-router'; // 建立route所需
import Config from '../config/index'; import layout from '../component/layout/layout'; // 佈局界面

import login from '../containers/login/login'; // 登陸界面

/** * (路由根目錄組件，顯示當前符合條件的組件) * * @class Roots * @extends {Component} */
class Roots extends Component {    render() {        
        // 這個組件是一個包裹組件，全部的路由跳轉的頁面都會以this.props.children的形式加載到本組件下        return (            <div>{this.props.children}</div>        );    } }

// const history = process.env.NODE_ENV !== 'production' ? browserHistory : hashHistory;

// 快速入門
const home = (location, cb) => {   
     require.ensure([], require => {         cb(null, require('../containers/home/homeIndex').default)     }, 'home'); }
    
// 百度圖表-折線圖
const chartLine = (location, cb) => {    
    require.ensure([], require => {         cb(null, require('../containers/charts/lines').default)    }, 'chartLine'); }

// 基礎組件-按鈕
const button = (location, cb) => {   
    require.ensure([], require => {         cb(null, require('../containers/general/buttonIndex').default)    }, 'button'); }

// 基礎組件-圖標
const icon = (location, cb) => {    
    require.ensure([], require => {         cb(null, require('../containers/general/iconIndex').default)    }, 'icon'); }

// 用戶管理
const user = (location, cb) => {   
    require.ensure([], require => {         cb(null, require('../containers/user/userIndex').default)    }, 'user'); }

// 系統設置
const setting = (location, cb) => {    
    require.ensure([], require => {         cb(null, require('../containers/setting/settingIndex').default)    }, 'setting'); }

// 廣告管理
const adver = (location, cb) => {  
    require.ensure([], require => {         cb(null, require('../containers/adver/adverIndex').default)    }, 'adver'); }

// 組件一
const oneui = (location, cb) => {   
    require.ensure([], require => {         cb(null, require('../containers/ui/oneIndex').default)    }, 'oneui'); }
// 組件二
const twoui = (location, cb) => {    
    require.ensure([], require => {         cb(null, require('../containers/ui/twoIndex').default)    }, 'twoui'); }

// 登陸驗證
const requireAuth = (nextState, replace) => {    
    let token = (new Date()).getTime() - Config.localItem('USER_AUTHORIZATION');    
    if(token > 7200000) { // 模擬Token保存2個小時         replace({            pathname: '/login',            state: { nextPathname: nextState.location.pathname }        });    } }

const RouteConfig = (    <Router history={browserHistory}>        <Route path="/home" component={layout} onEnter={requireAuth}>            <IndexRoute getComponent={home} onEnter={requireAuth} /> // 默認加載的組件，好比訪問www.test.com,會自動跳轉到www.test.com/home            <Route path="/home" getComponent={home} onEnter={requireAuth} />            <Route path="/chart/line" getComponent={chartLine} onEnter={requireAuth} />            <Route path="/general/button" getComponent={button} onEnter={requireAuth} />            <Route path="/general/icon" getComponent={icon} onEnter={requireAuth} />            <Route path="/user" getComponent={user} onEnter={requireAuth} />            <Route path="/setting" getComponent={setting} onEnter={requireAuth} />            <Route path="/adver" getComponent={adver} onEnter={requireAuth} />            <Route path="/ui/oneui" getComponent={oneui} onEnter={requireAuth} />            <Route path="/ui/twoui" getComponent={twoui} onEnter={requireAuth} />        </Route>        <Route path="/login" component={Roots}> // 全部的訪問，都跳轉到Roots            <IndexRoute component={login} /> // 默認加載的組件，好比訪問www.test.com,會自動跳轉到www.test.com/home        </Route>        <Redirect from="*" to="/home" />    </Router> ); export default RouteConfig;

############
# 其餘配置
############

http {
    ############
    # 其餘配置
    ############
    server {
        listen 80;        server_name  antd.sosout.com;        root /mnt/html/reactAntd;        index index.html;        location ~ ^/favicon\.ico$ {            root /mnt/html/reactAntd;        }        location / {            try_files $uri $uri/ @router;            index index.html;            proxy_set_header   Host             $host;            proxy_set_header   X-Real-IP        $remote_addr;            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;            proxy_set_header   X-Forwarded-Proto  $scheme;        }        location @router {            rewrite ^.*$ /index.html break;        }        access_log  /mnt/logs/nginx/access.log  main;    }    ############    # 其餘配置    ############   }