In the development environment, the Vue project runs through the NPM run dev command, which is based on the local establishment of an Express server.

However, the NPM run build command is required to package the entire project on the server. After packaging, a dist folder will be generated in the project directory:

If you just put the dist file directly on the server.

This file directory is already processed, can open the normal directory file. The file name I use in this server is AK

The problems encountered and problems to be dealt with are as follows:

  1. Configure the routing
  2. Configure the vue. Config. Js
  3. The Apache server configures the.htaccess file

1. Configure routing. Here I use history

Const Router = new VuerOuter ({Routes, mode: 'history', base: '/ak' // server file})
  1. Configure vue.config.js, I here vue-cli is more than 3.x, all need to manually configure
// vue.config.js
module.exports = {

  publicPath: './',

}

It’s configured here and it will open on the server, but if you refresh it, the page will be lost. So configure the.htaccess file in the server.

  1. Configure the.htaccess file
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /ak/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} ! -f RewriteCond %{REQUEST_FILENAME} ! -d rewriteRule. /ak/index. HTML [L] </IfModule> # This configuration forwards all non-existing requests to index. HTML

Here is how to place other files, just replace the corresponding ak file with the desired file.

In summary, once you have mastered the above three steps, you are ready to deploy your Vue project to an Apache server. I hope this article will be helpful to novice partners. If there is any mistake or supplement, please advise, thank you!

Visit the project address (in content is for reference only) : http://121.37.204.184/ak/