vue、react等单页面项目部署到服务器的方法及vue和react的区别


Posted in Javascript onSeptember 29, 2018

最近好多伙伴说,我用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

vue、react等单页面项目部署到服务器的方法及vue和react的区别

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

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;
 }
 ############
 # 其他配置
 ############ 
}

vue、react等单页面项目部署到服务器的方法及vue和react的区别

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

vue、react等单页面项目部署到服务器的方法及vue和react的区别

/**
* 疑惑一:
* 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;

vue、react等单页面项目部署到服务器的方法及vue和react的区别

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

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版本了(不喜勿喷)

总结

以上所述是小编给大家介绍的vue、react等单页面项目应用部署到服务器的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS实现日期加减的方法
Nov 29 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
javascript操作cookie
Jan 17 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
简单分析js中的this的原理
Aug 31 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 #Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 #Javascript
详解React之key的使用和实践
Sep 29 #Javascript
vue给组件传递不同的值方法
Sep 29 #Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 #Javascript
浅谈vue项目打包优化策略
Sep 29 #Javascript
vue里input根据value改变背景色的实例
Sep 29 #Javascript
You might like
基于PHP对XML的操作详解
2013/06/07 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
python写日志封装类实例
2015/06/28 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python+Wordpress制作小说站
2017/04/14 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
教育科学研究生自荐信
2013/10/09 职场文书
文员岗位职责
2013/11/09 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
2014年教师节活动总结
2014/08/29 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
python 使用pandas读取csv文件的方法
2022/12/24 Python