Steps to package and deploy the Vue project to the Apache server

In the development environment, the vue project is run through the npm run dev command, which is based on building an express server locally.

But this is not the case on the server. The entire project must be packaged using the npm run build command. After packaging, a dist folder will be generated in the project directory with the following contents:

Then just drop these files into a folder on the server. My folder name is ibms

Problems encountered:

1. Go directly to http://www.xxx.com/ibms/, you will find that the webpage is a white screen with nothing on it. This is quite strange. In fact, it is because there is a problem with the resource loading path!

Solution:

Modify the webpack configuration in build in index.js in config:

assetsPublicPath: '/ibms/'

Add the following to the index.js configuration in the router:

export default new Router({
 mode: 'history',
 scrollBehavior: () => ({ y: 0 }),
 base: '/ibms/', // add this line routes: constantRouterMap
})

Next, re-package it with npm run build, and then drop it into the ibms folder on the server. Then the page can be accessed normally.

2. Refresh the current page or use the URL bar to access a sub-page, and you will find that the webpage is 404. This is because the mode of Vue routing is history mode.

Solution:

Just forward all requests to http://www.xxx.com/ibms/index.html

I am using Apache as the web server here. Create a new .htaccess file in the ibms directory (at the same level as index.html) and edit the code.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /ibms/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /ibms/index.html [L]
</IfModule>

The purpose of this configuration is to forward all requests that do not exist on the server to index.html. (PS: Remember to restart the Apache server)

This is the end of this article about the steps to package and deploy the Vue project to the Apache server. For more relevant Vue project packaging and deployment to Apache, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!