vue、react等單頁面項目應該這樣子部署到服務器

sumory 發布于2019-07-25 14:08 / 2356人閱讀

摘要：服務端渲染等服務端渲染框架構建的項目部署到服務器，并用守護程序最近好多伙伴說，我用做的項目本地是可以的，但部署到服務器遇到好多問題資源找不到，直接訪問頁面空白，刷新當前路由。。。

服務端渲染：next.js、nuxt.js等服務端渲染框架構建的項目部署到服務器，并用PM2守護程序

最近好多伙伴說，我用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為例，配置過程大致如下：（假設：
1、項目文件目錄： /mnt/html/spa（spa目錄下的文件就是執行了npm run dist 后生成的dist目錄下的文件）
2、訪問域名：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;
}

注意事項：
1、配置域名的話，需要80端口，成功后，只要訪問域名即可訪問的項目
2、如果你使用了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 (
            {this.props.children}
        );
    }
}

// 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 = (
    
        
             // 默認加載的組件，比如訪問www.test.com,會自動跳轉到www.test.com/home
            
            
            
            
            
            
            
            
            
        
         // 所有的訪問，都跳轉到Roots
             // 默認加載的組件，比如訪問www.test.com,會自動跳轉到www.test.com/home
        
        
    
);

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

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

GPU云服務器云服務器怎么部署react項目就像這樣子的就可以啦 react如何部署到云服務器上騰訊云服務器部署vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/39756.html

前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0
vue面試

摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數據模型，數據和業務邏輯都在Model層中定義；View 代表UI視圖，負責數據的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
Vue面試中，經常會被問到的面試題/Vue知識點整理

摘要：可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。我工作中只用到，對和不怎么熟與的區別相同點都支持指令內置指令和自定義指令都支持過濾器內置過濾器和自定義過濾器都支持雙向數據綁定都不支持低端瀏覽器。看看面試題，只是為了查漏補缺，看看自己那些方面還不懂。切記不要以為背了面試題，就萬事大吉了，最好是理解背后的原理，這樣面試的時候才能侃侃而談。不然，稍微有水平的面試官一看就能看出，是...

mengbo 2019-08-23 11:54 評論0 收藏0
大前端 - 收藏集 - 掘金

摘要：是目前唯一一個支持同步調用的跨平臺年度上最多的個項目前端掘金年接近尾聲，在最近的幾篇文章中，會整理總結一些年度開源項目。 JS 全棧教程 - 前端 - 掘金本課程是基于阮一峰的 js 全棧教程的視頻版本，免費供大家觀看... 2016 年 10 個最佳的 CodePen 作品 - 前端 - 掘金說到 CodePen，前端開發者們肯定不會陌生。如果說 Dribbble 是設計師們聚集的圣...

honhon 2019-08-20 17:03 評論0 收藏0