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

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

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

// vue.config.js

module.exports = {
 baseUrl: process.env.NODE_ENV === 'production' "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 "htmlcode">

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的。这里只是一个简单的记录，没有做过多的说明。


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