apache下面二级目录部署react/vue的方法

本文主要是记录一下在apache二级目录上面部署react和vue项目。根目录下面部署很简单，但是在二级目录下就需要在webpack的配置或者vue-cli的配置文件以及路由组件做一些简单调整。由于mac系统自己带了apache，所以我们只需要开启就可以了。

配置apache

在终端中输入sudo apachectl start，然后在浏览器中输入"http://localhost"，如果出现"It works!"则说明apache启动成功。

由于mac系统在当前用户目录下面已经有一个Sites目录，专门用来存放站点的文件，这里只需要在里面建目录就可以了，这里有两个项目，一个为react项目，另一个为vue项目，目录如下：

|- Sites
| - react # react项目build后的目录
| - vue # vue项目build后的目录

在终端中进入目录/etc/apache2，如果是第一次配置apache，一定要把"httpd.conf"文件和目录"extra"作个备份。接下就是编辑"httpd.conf"文件，可以选择把整个"apache2"目录拖到文本编辑中进行修改，也可以使用vim来编辑，记得使用root权限。

在配置文件中找到#ServerName localhost:80去掉"#"号，然后找到#LoadModule rewrite_module libexec/apache2/mod_rewrite.so同样去掉"#"号，然后在httpd.conf同级目录新建一个目录users来放置自己的配置文件，这里需要在apace配置中添加Include /private/etc/apache2/users/*.conf来加载自己的配置。

在users目录中新建一个文件，这里取名叫www.example.conf。在里面添加内容：

<VirtualHost *:80>
 DocumentRoot /Users/你的用户名/Sites/
 <Directory "/Users/你的用户名/Sites/">
 Options Indexes FollowSymLinks
 AllowOverride All
 Order allow,deny
 Allow from all
 Require all granted
 </Directory>
</VirtualHost>

上面配置中的东西我就不作解释了，因为我也不是很清楚。需要清楚的是DocumentRootxxx和<Directory "xxx">均指向你的网站部署所在目录。

配置好了记得重启apache，我这里是使用命令sudo apachectl -k restart。

配置Vue

项目是通过vue-cli 3.x生成的，在根目录新建配置文件"vue.config.js"，然后添加以下内容：

// vue.config.js

module.exports = {
 baseUrl: process.env.NODE_ENV === 'production' ? '/vue' : '/',
 outputDir: 'build',
};

这里把outputDir改成"build"是为了和react保持一致。然后找到"router.js"文件，添加一个base配置。

注意: 怎么把vue项目部署在二级目录，官网文档是有说明的。

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 {
  path: '/',
  name: 'home',
  component: Home
 }
 })

最后我们还需要在public目录中添加一个.htaccess文件来配置将所有的请求转发到静态文件index.html

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . /vue/index.html [L]

这样在vue这边的准备工作就ok了。

配置React

React项目是通过create-react-app创建的，这里只需要在package.json中添加"homepage": "."，这里的homepage值也可以指定一个具体的域名，比如"homepage": http://www.example.com/react 。

然后是修改路由的basename值。这里使用的是"react-router 4"。

import {BrowserRouter as Router} from 'react-router-dom';

function Routes() {
 const isProd = process.env.REACT_APP_ENV === 'production';
 return (
 <Router basename={isProd ? '/react' : '/'}>
 </Router>
 )
}

然后public目录同样添加.htaccess文件

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . index.html [L]

运行结果

在浏览器中打开地址http://localhost/react即可查看react项目，http://localhost/vue来查看vue项目。本人电脑上亲测是没有问题的，访问路由http://localhost/vue/about都ok的。这里只是一个简单的记录，没有做过多的说明。

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

赞 (0)

相关推荐

  • vue-router启用history模式下的开发及非根目录部署方法

     为什么要有 hash 和 history 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. 为了达到这一目的,浏览器当前提供了以下两种支持: 1.hash -- 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello.它

  • Vue项目服务器部署之子目录部署方法

    Vue项目尤其是基于.vue单文件格式的项目部署,在build成js文件后发布到服务器上,一般都是通过nginx反向代理到跟文件目录后直接访问,然而由于很多时候没办法使用更多的子域名(比如微信公众号只能有一个域名),所以急需将服务器部署到子目录.本经验以一次成功的系统部署为例,讲解子目录方式部署Vue工程. 首先介绍一下Poi,我们的项目没有使用webPack进行前端工程项目管理,使用了Poi进行管理:Develop web apps with no build configuration un

  • 解决vue-cli3 使用子目录部署问题

    在使用 vue-cli3 build的时候,使用非子目录需要在 vue.config.js 中添加如下代码: module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/', } 但是build完后,放在nginx服务下,会看到如下报错,页面也显示 no-script 的内容 [Vue warn]: You are using the runtime-only build of Vue wher

  • apache下面二级目录部署react/vue的方法

    本文主要是记录一下在apache二级目录上面部署react和vue项目.根目录下面部署很简单,但是在二级目录下就需要在webpack的配置或者vue-cli的配置文件以及路由组件做一些简单调整.由于mac系统自己带了apache,所以我们只需要开启就可以了. 配置apache 在终端中输入sudo apachectl start,然后在浏览器中输入"http://localhost",如果出现"It works!"则说明apache启动成功. 由于mac系统在当前用

  • PHP+Apache实现二级域名之间共享cookie的方法

    本文实例讲述了PHP+Apache实现二级域名之间共享cookie的方法.分享给大家供大家参考,具体如下: 简介 login.koastal.com设置domain为koastal.com,则www.koastal.com即可访问该cookie. 也就是说二级域名(或者三级域名)之间可以通过这种方式共享cookie. 其实cookie的domain属性的用法跟path有些类似,比如我们将cookie的path设置为/,则/user目录下也可以访问该cookie. 实践 Apache同一端口对应不

  • 使用Jenkins部署React项目的方法步骤

    背景 公司的前端项目部署方式比较简单,整个过程基本上是手动的: 目标 通过工具实现以下几个任务: 编译.部署自动化: 选择指定版本进行回滚: 区分不同的分支(环境): 技术方案 选用 jenkins 作为部署工具:也便于后续 CI 的接入: 使用 docker 进行编译,确保每次编译的环境的稳定: 步骤 步骤一:搭建 Jenkins 搭建 Jenkins 有很多方案,这里选择使用 docker 搭建. docker-compose.yml 的内容如下: version: '3' services

  • vue部署到域名二级目录刷新404的解决

    目录 vue部署到域名二级目录刷新404 vue如何部署二级目录 说一下这里会遇到得问题 如何解决 vue部署到域名二级目录刷新404 一个域名有个根目录,但有两个项目,就需要二级目录 比如说,我有一个域名为csdn.com的服务器,我想部署两个项目: 12306项目:http://csdn.com/12306 淘宝项目:http://csdn.com/taobao 如果是单页项目,而且单页项目的路由用的是history模式,不管是vue还是react都会“刷新当前页面404” 这是因为这种(h

  • vue history 模式打包部署在域名的二级目录的配置指南

    最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash 模式后面带#,打包的时候只需要把绝对路径(/)换成相对对路径(./),就可以部署在任何地方,不需要服务器配合,但是不好看,所以我们一般选择history 模式,但是history 模式需要配合服务器的部署. 本文主要是在vue-cli3版本下,对部署在域名的二级目录下做四处的配置: 1. vue-r

  • 详解vue通过NGINX部署在子目录或者二级目录实践

    1.修改 router/index.js 添加一行 base: 'admin', 2.然后修改 config/index.js 增加一行 const assetsPublicPath = '/admin/' 然后修改 下面两处assetsPublicPath 的值为定义的变量 3.部署时,通过NGINX的反向代理 首先,给需要部署的项目定义一个 NGINX 的 server server { listen 8001; location / { # vue h5 history mode 时配置

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

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

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

  • Apache本地二级域名配置方法

    本文讲述了Apache本地二级域名配置方法.分享给大家供大家参考,具体如下: 我们在本地调试web程序时,常有很多不同的项目.不同的项目,我们希望使用不同的文件夹和不同的域名. 比如今天我正在建设一个鲜花网站,可是有个客户临时要做一个简单的卖眼镜的网站,两个网站在电脑上放在不同的目录下,而且要使用两个不同的域名来访问.一个是flower.domain.com,一个是glass.domain.com. 通常情况下,我们应该这么做: 1.在本地hosts文件中,将flower.domain.com指

  • 如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)

    1.导语 首先来简单介绍一下webpack:现代 JavaScript 应用程序的 静态模块打包工具 .当 webpack 处理应用程序时,它会在内部构建一个会映射项目所需的每个模块 的依赖图(dependency graph),并生成一个或多个 bundle .webpack4.0出现之后,我们可以不用再引入一个配置文件来打包项目,并且它仍然有着很高的可配置性,可以很好满足我们的需求. 在开始正文之前,首先先来看看我们要实现的成果: 支持ES6+JQuery+Less/Scss的单页/多页脚手

  • Apache,wsgi,django 程序部署配置方法详解

    Apache,wsgi,django 程序部署配置方法详解

    本文实例讲述了Apache,wsgi,django 程序部署配置方法.分享给大家供大家参考,具体如下: 前面写过一篇文章,ngixn,uwsgi,django,python 环境配置,有兴趣的朋友可以参考 nginx,django部署 后来有人在QQ上问我,用Apache 好部署吗?我当时只在windows下用 APACHE2.3,django1.4,wsgi 部署过,还没有在 linux 下部署.前几天有时间,我在 centos 上测试部署了一下.也不难.唯一的差别是,在windows 下有已

随机推荐