鍍金池/ 問答/HTML/ react部署到服務(wù)器上,現(xiàn)在需要部署到服務(wù)器的子目錄中,該怎么做?

react部署到服務(wù)器上,現(xiàn)在需要部署到服務(wù)器的子目錄中,該怎么做?

項(xiàng)目部署,服務(wù)器上有很多項(xiàng)目,所以現(xiàn)在需要部署到子目錄中
例如:www.xxxx.com/demo/
當(dāng)輸入以上網(wǎng)址時(shí)加載我的項(xiàng)目,這就需要在服務(wù)器里邊建一個(gè)demo的文件夾,并將我的react打包之后的代碼放進(jìn)去。
現(xiàn)在出現(xiàn)的問題是當(dāng)輸入網(wǎng)址的時(shí)候www.xxxx.com/demo/index.html 加載的是www.xxxx.com#/
這里我用的是HashRouter
請(qǐng)問有沒有辦法前端設(shè)置什么實(shí)現(xiàn)以上
就是輸入www.xxxx.com/demo/index.html然后加載的是www.xxxx.com/demo/index.html/#/
路由配置:

<HashRouter history={hashHistory} basename="/demo/index.html">
    <Switch>
        <Route path="/" component={Login} />
        <Redirect from="/login" to="/"/>
        <Route path="/" component={Base} />
    </Switch>
    {/*<Route path="*" component={NotFound}/>*/}
</HashRouter>,

其中basename試過“/Demo” 還有“/Demo/”結(jié)果都是一樣的都是跳轉(zhuǎn)回www.xxxx.com/#/

回答
編輯回答
雨萌萌

為什么不直接改webpack的配置? 應(yīng)該是publicPath吧

2017年10月14日 22:48
編輯回答
墨沫

謝邀!
單頁面部署到服務(wù)器
單頁面應(yīng)用應(yīng)該放到nginx或者apache、tomcat等web代理服務(wù)器中,同時(shí)要根據(jù) 自己服務(wù)器的項(xiàng)目路徑 更改react的路由地址。
如果說項(xiàng)目是直接跟在域名后面的,比如:http://www.sosout.com ,根路由就是 '/'。
如果說項(xiàng)目是直接跟在域名后面的一個(gè)子目錄中的,比如:http://www.sosout.com/children ,根路由就是 '/children ',不能直接訪問index.html。

以配置Nginx為例,配置過程大致如下:
(假設(shè):
1、項(xiàng)目文件目錄: /mnt/html/reactAntd(reactAntd目錄下的文件就是執(zhí)行了npm run dist 后生成的antd目錄下的文件)
2、訪問域名:antd.sosout.com
進(jìn)入nginx.conf新增如下配置:

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/ /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;
}

注意事項(xiàng):
1、配置域名的話,需要80端口,成功后,只要訪問域名即可訪問的項(xiàng)目
2、如果你使用了react-router的browserHistory 模式,在nginx配置還需要重寫路由:

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/ @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;
}

為什么要重寫路由?因?yàn)槲覀兊捻?xiàng)目只有一個(gè)根入口,當(dāng)輸入類似/home的url時(shí),如果找不到對(duì)應(yīng)的頁面,nginx會(huì)嘗試加載index.html,這是通過react-router就能正確的匹配我們輸入的/home路由,從而顯示正確的home頁面,如果browserHistory模式的項(xiàng)目沒有配置上述內(nèi)容,會(huì)出現(xiàn)404的情況。

basename: string
作用:為所有位置添加一個(gè)基準(zhǔn)URL
使用場(chǎng)景:假如你需要把頁面部署到服務(wù)器的二級(jí)目錄,你可以使用 basename 設(shè)置到此目錄。

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

clipboard.png

疑惑:
為什么路由上帶有index.html?不管是browserHistory還是HashHistory 遇到index.html 都會(huì)重定向,而且也不美觀!

2017年7月12日 06:47
編輯回答
舊螢火
<BrowserRouter basename="/demo/index.html/" />
2017年9月3日 03:12