Methods for deploying react and vue in the secondary directory below apache

The main purpose of this article is to document 1 the deployment of react and vue projects in the apache2 level directory. It's easy to deploy under the root directory, but at level 2 you need to make a few simple adjustments to the configuration of webpack or to the configuration file of ES5en-ES6en and the routing component. Since the mac system comes with its own apache, we just need to turn it on.

Configuration apache

Type sudo apachectl start in the terminal, then type "http://localhost" in the browser, if "It works!" Indicates that apache has been successfully started.

Since the mac system already has one Sites directory under the current user directory, which is specially used for storing files of the site, it is only necessary to create a directory inside it. There are two projects here, one is react project, the other is vue project, and the directory is as follows:

|- Sites
| - react # react project build After the directory 
| - vue # vue project build After the directory 

Enter the directory in the terminal /etc/apache2 If it is the first time to configure apache, make a backup of the "httpd.conf" file and the directory "extra". The next step is to edit the "httpd.conf" file. You can either drag the entire "apache2" directory to your text editor to make changes, or you can use vim to edit it, using the root permissions.

Find it in the configuration file #ServerName localhost:80 Get rid of the "#" and find it #LoadModule rewrite_module libexec/apache2/mod_rewrite.so Again, get rid of the "#", and then in httpd.conf Create a new directory, users, for the sibling directory to place your own configuration file, which needs to be added to the apace configuration Include /private/etc/apache2/users/*.conf To load your own configuration.

Create a new file in the users directory and call it www.example.conf. Add content to it:

<VirtualHost *:80>
 DocumentRoot /Users/ Your username /Sites/
 <Directory "/Users/ Your username /Sites/">
 Options Indexes FollowSymLinks
 AllowOverride All
 Order allow,deny
 Allow from all
 Require all granted
 </Directory>
</VirtualHost>

I'm not going to explain what's in the configuration above, because I don't really know. Just to be clear DocumentRootxxx and <Directory "xxx"> Point to the directory where your site is deployed.

Remember to restart apache once it's configured. I'm using the command here sudo apachectl -k restart .

Configuration Vue

The project is generated by ES71en-ES72en 3.x. In the root directory, create a new configuration file "vue. config. js" and then add the following:

// vue.config.js

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

Here is the outputDir The change to "build" is to keep the same number as react. Then go to the file "ES83en.js" and add an base configuration.

Note: How to deploy the vue project to a level 2 directory is explained in the official documentation.

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

And finally we need to be in public Add 1 to the directory #ServerName localhost:800 File to configure to forward all requests to the static file 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]

So we're ready for ok on the vue side.

Configuration React

The React project was created through ES108en-ES109en-ES110en, which only needs to be in the package.json add "homepage": "."， Here, homepage The value can also specify a specific domain name, for example "homepage": http://www.example.com/react .

Then there is the modification of the route basename Value. "react-router 4" is used here.

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

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

Then add the same.htaccess file to the public directory

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]

The results

Open in a browser address http: / / localhost react can view react project, http: / / localhost vue to view vue project. On my computer test is no problem, access the routing http: / / localhost/vue about ok. This is just a simple note, without much explanation.