Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to deploy react and vue in the secondary directory under apache. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Deploy the react and vue projects on top of the apache secondary directory. It is easy to deploy under the root directory, but in the secondary directory, you need to make some simple adjustments to the configuration of webpack or the configuration files and routing components of vue-cli. Since the mac system comes with apache, we just need to turn it on.

Configure apache

Enter sudo apachectl start in the terminal, and then enter "http://localhost"" in the browser, if "It works!" appears. It means that apache started successfully.

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

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

Enter the directory / etc/apache2 in the terminal. If you configure apache for the first time, be sure to make a backup of the "httpd.conf" file and the directory "extra". The next step is to edit the "httpd.conf" file. You can choose to drag the entire "apache2" directory to text editing, or you can use vim to edit it, remember to use root permissions.

Find # ServerName localhost:80 in the configuration file to remove the "#" number, then find # LoadModule rewrite_module libexec/apache2/mod_rewrite.so to remove the "#" sign, and then create a new directory users in the httpd.conf peer directory to place your own configuration file. Here, you need to add Include / private/etc/apache2/users/*.conf to the apace configuration to load your own configuration.

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

DocumentRoot / Users/ your user name / Sites/ Options Indexes FollowSymLinks AllowOverride All Order allow,deny Allow from all Require all granted

I will not explain what is in the above configuration, because I am not very clear. What needs to be clear is that DocumentRootxxx and both point to the directory where your site is deployed.

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

Configure Vue

The project is built through vue-cli 3.x, create a new configuration file "vue.config.js" in the root directory, and then add the following:

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

The change from outputDir to "build" here is to be consistent with react. Then find the "router.js" file and add a base configuration.

Note: there are instructions on how to deploy the vue project in the secondary directory on the official website.

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

Finally, we need to add an .htaccess file in the public directory to configure forwarding all requests to the static file index.html

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

In this way, the preparatory work on the vue side will be ok.

Configure React

The React project is created through create-react-app, here you only need to add "homepage": "." to the package.json, and the homepagevalue here can also specify a specific domain name, such as "homepage": http://www.example.com/react.

Then modify the basename value of the route. "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 ()}

Then add the .htaccess file to the public directory as well

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

Running result

Open the address http://localhost/react in the browser to view the react project, and http://localhost/vue to view the vue project. There is no problem with personal testing on my computer, and the access route http://localhost/vue/about is all ok. This is just a simple record without too much explanation.

On "apache under the secondary directory how to deploy react and vue" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.