你好,欢迎访问我的博客!登录
当前位置:首页 - 服务器问题 - 正文 SEO教程学习网

如何在apache下面的二级目录部署react/vue

2018-12-21服务器问题seo学习网59°c
A+ A-
本文主要是记录一下在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的。我们的部份产品 推荐:网站被劫持检测、网站监控站群批量SEO查询六大搜索引擎 模拟蜘蛛批量替换工具 - 多行批量替换服务器专用下载工具iis日志分析工具批量PING,服务器批量添加网卡IP小工具远程同步备份工具整站下载工具批量远程桌面连接工具iis网站批量管理
  选择分享方式
未定义标签

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录