vue、react等單頁面項目部署到服務器的方法及vue和react的區別

時間  2019-12-07
標籤 vue react 頁面 項目 部署 服務器 方法 區別 欄目 React 简体版
原文   原文鏈接

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

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

前端精品教程：百度網盤下載前端

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

以配置Nginx爲例，配置過程大體以下：（假設：react

一、項目文件目錄： /mnt/html/spa（spa目錄下的文件就是執行了npm run dist 後生成的dist目錄下的文件）webpack

二、訪問域名：spa.sosout.com） nginx

進入nginx.conf新增以下配置：es6

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}

注意事項：web

前端精品教程：百度網盤下載vue-router

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
############
# 其餘配置
############
 
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;
  }
  ############
  # 其餘配置
  ############
}

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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'
  }]
}]

react項目：

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
/**
* 疑惑一：
* 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;

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
############
# 其餘配置
############
 
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;
  }
  ############
  # 其餘配置
  ############
}

下面看下vue和react區別

前端都知道3個主流框架，vue,react,anjular，固然目前最火的仍是vue和react，那麼vue 和react 的區別？

相同點：

    1.都支持服務器端渲染

    2.都有Virtual DOM,組件化開發,經過props參數進行父子組件數據的傳遞,都實現webComponent規範

    3.數據驅動視圖

    4.都有支持native的方案,React的React native,Vue的weex

    5.都有管理狀態，React有redux,Vue有本身的Vuex（自適應vue，量身定作）

不一樣點：

前端精品教程：百度網盤下載

       1.React嚴格上只針對MVC的view層,Vue則是MVVM模式

       2.virtual DOM不同,vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹.

           而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制

       3.組件寫法不同, React推薦的作法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js';

           Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;

       4.數據綁定: vue實現了數據的雙向綁定,react數據流動是單向的

       5.state對象在react應用中不可變的,須要使用setState方法更新狀態;

         在vue中,state對象不是必須的,數據由data屬性在vue對象中管理；

就對我而言吧，vue適合開發移動端項目，react適合開發pc端項目（我的觀點），

              固然我仍是喜歡 React,畢竟後臺大，哈哈，雖然如今升級到16版本了（不喜勿噴）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程