vue、react等单页面项目应该这样子部署到服务器

最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404。。。现在我们一起讨论下单页面如何部署到服务器?

由于前端路由缘故,单页面应用应该放到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就能正确的匹配我们输入的/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;
  }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue 如何添加全局函数或全局变量以及单页面的title设置总结

    传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的 这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法 首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu

  • vue构建单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验. 2. 为什么选择 vue? 在选择 vue 之前,使用 reactjs 也做过一个小 Demo,虽然两者都是面向组件的开发思路,但是 reactjs 的全家桶方式,实在太过强势,而自己定义的 JSX 规范,揉和在

  • 浅谈vue2 单页面如何设置网页title

    前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次.对于现在的前端框架,传统的每个页面设置title标签的做法是不行的. 推荐使用vue-wechat-title插件 下载安装插件依赖 npm install vue-wechat-title --save 在main.js中引入插件 import VueWechatTitle from 'vu

  • vue.js单页面应用实例的简单实现

    一:npm的安装 由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号:npm -v 以上提示代表安装成功 二:vue.js环境搭建 1.首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装vue.js环境::cnpm install -g vue-cli 3.测

  • 详解Vue使用命令行搭建单页面应用

    使用命令行搭建单页面应用 我们来看一下最后完成的效果: 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一. 下载工具 node, git 的下载大家可以去官网自行下载就可以了. 下面说一说安装 npm,npm 是在以上两个都安装的情况下才可以的. 国内直接 git npm 非常慢,所以我们到 taobao 的 npm 镜像下面去下载安装 镜像地址>> 打开安装好的 git bash 1 . 在 Git Bash 输入镜像的地址: 下载成功后,输入 cnpm -v

  • vue、react等单页面项目应该这样子部署到服务器

    最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.sosout.com ,根路由就是 '/'.

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

    最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...用react做的项目也同样遇到类似问题.现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.so

  • vue自动路由-单页面项目(非build时构建)

    这是一个什么项目? 答:这是一个单页面的vue.js项目,主要为了实现在非build时,进行自动路由.简单点说,就是在请求页面时,根据url进行动态添加路由. 自动路由有什么限制吗? 答:有,因为是通过url进行动态添加,所以,在指定文件夹下,组件文件的相对路径必须与url有一定的关系.当前demo项目,url路径与modules文件夹下的组件相对路径一致.例如: url地址:localhost:5000/home/index 组件路径:modules/home/index/index.vue

  • 多页vue应用的单页面打包方法(内含打包模式的应用)

    一.简介 关于如何以及为什么要构建多页vue应用,我们在上一篇文章中已经介绍过,感兴趣的请参考构建多页vue应用.本文我们要介绍的是,对于一个多页应用,如何单独打包其中一个(或几个)页面. 一般来说,多页应用不需要打包单个页面,这多个页面可以作为整个应用直接放在静态资源服务器上.不过我们也说过,多页应用的每个页面也可能会放在不同的服务器上,这时候如果往每个服务器上都放置完整的资源包,就会显得过于臃肿.于是我们可能就需要将某个页面单独打包出来. 诚然,有一个很明显的方法,就是在每次打包的时候直接删

  • vue cli2.0单页面title修改方法

    一.npm install vue-wechat-title --save  执行命令 二.在main.js中添加 Vue.use(VueWechatTitle); Vue.config.productionTip= false 三.在router/index.js文件中添加 routes: [{ path: '/',redirect: 'Home' },{ path: '/Home',name: 'Home',component: Home, meta:{ title:'银行开户' }},],

  • vue实现的多页面项目如何优化打包的步骤详解

    遇到的问题 在多页面框架打包的过程中会,随着业务的增加页面越来越多,使用的三方包也会越来越多,但并不是所有页面都会使用到三方插件,使用webpack打包会让所有的三方包打包到一起,会导致vendor.js(三方包打包后的文件)越来越大,即使没使用过三方插件的页面也会引入,页面加载会越来越慢. 如何优化 使用cdn引入,这种就每次新建一个页面的时候手动通过cdn的方式引入,但是并不是特别好的方式,还需要手动加入. 就是使用splitChunks分割三方包,将三方包单独打包出来,根据页面的依赖情况自

  • vue-cli3项目打包后自动化部署到服务器的方法

    一.安装 scp2 npm install scp2 --save-dev 二.写好脚本 例如 upload.js (下面任选一个即可) 位置和 package.json平级即可. 简略版 'use strict' // 引入scp2 var client = require('scp2'); client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX',

  • vue中SPA单页面应用程序详解

    一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中. SPA的工作原理: eg:  http://127.0.0.1/index.html#/start ①根据地址栏中url解析完整的页面:index.html 加载index.html ②根据地址栏中url解析#后的路由地址: start 根据路由地址,去在当前应用的配置中 找该路由地址的配置

  • vue实现todolist单页面应用

    刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用. 效果: 功能: 在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数: data,methods,watch,还有localstorage 页面非常简单: 先写外面的盒子,这里用到v-model双

  • 详解webpack + vue + node 打造单页面(入门篇)

    1.node下载地址:http://nodejs.cn/download/,安装完成检查node和npm版本 2.淘宝镜像 : npm install cnpm -g --registry=https://registry.npm.taobao.org ,淘宝镜像比npm要快很多,可以直接用cnpm代替npm 3.安装vue-cli:cnpm install -g vue-cli 安装webpack:cnpm install -g webpack -g 表示全局安装 编程过程中需要引入模块的话可

随机推荐