Windos System under Apache hostiry mode Vue project deployment

1. Vue sets hoStory mode

A. Set the route history mode.

B. Set publicPath to the absolute path of the deployment project before Build

2. Apache Installation and Configurationhttpd.apache.org/)

A. Decompress the package to the specified directory.

B. Change the httpd.conf configuration file: change the root directory, deployment file directory, port number, and Allowoverride All

C. Install Apache’s main service: With it, Apache can start. To add the httpd.exe environment variable, open a CMD window and enter HTTPD -k install -n Apache24

D. Start Apache,

After the Apache installation is complete, go to http://localhost:8085

3. Deploy the VUE project

A. NPM will run the build project after the packaging, on the htdocs folder, and name the contract, at this point to http://localhost:8085/contract is accessible, but switch routing or refresh the page will show 404

B. Create a new.htaccess file in your project (resolve page refresh 404)

C. Configuration.htaccess file

  RewriteEngine On

  RewriteBase /

  RewriteRule ^index.html$ – [L]

RewriteCond %{REQUEST_FILENAME} ! -f

RewriteCond %{REQUEST_FILENAME} ! -d

  RewriteRule . /contract/index.html [L]

The project is now accessible and refreshed

4. Apache Reverse Proxy

After the preceding steps are complete, the project is successfully configured. However, cross-domain problems are reported on the interface sometimes. In this case, you can configure the reverse proxy and open http.conf