Deploy vue project in nginx

foreword

nginx is a high performance HTTP and reverse proxy web server. As a web server, nginx handles static files, index files, and automatic indexing very efficiently.

Start the nginx service

start nginx

Enter in the browser: localhost:80

means that the service is up.

Deploy the Vue project

In the following example, the front-end Vue project is created using Vue CLI3

1 Deploy to the root directory

1) Vue configuration

• Routing mode: history. (hash mode is also available)
• publicPath ‘./’

Finished npm run build for packaging.

2) nginx configuration and deployment

• Modify nginx.conf

  location / {
      root    app; #项目文件位置
      index  index.html;
      try_files $uri $uri/ /index.html;
  }
  

  

  Finished restart nginx service

  nginx -s reload
  

3) Routing mode and address matching

There are two pages in the vue project, the home page and the about page.

history mode

• / match localhost:8010

• /about matches localhost:8010/about

hash mode

• / -> http://localhost:8010/#/
• /about -> http://localhost:8010/#/about

2 Deploy to a subdirectory

That is, access the project through localhost:8010/subdirectory/xx .
This is also to be configured separately in Vue and Nginx.

The subdirectory name takes gis as an example:

1) vue configuration

• Routing base attribute:

const router = new VueRouter({
    
    
  routes,
  mode: 'history',
  base: '/gis/'
})

• view.config.js

module.exports = {
    
    
	publicPath: '/gis/',
	.....
}

After configuration, repackage.

This is also explained in the Vue CLI documentation.

2) nginx configuration

You can create a new directory gis in nginx, and copy the packaging result (content in the dist directory) configured above. You can also put it in any directory, depending on your personal habits.

 location / {
    
    
     root    app; #项目文件位置
     index  index.html;
     try_files $uri $uri/ /index.html;
 }
 # 子目录
 location ^~/gis {
    
    
     alias  gis; #项目文件位置
     index  index.html;
     try_files $uri $uri/ /gis/index.html;
 }

When finished, restart the nginx service

nginx -s reload

Reference:
1. nginx Baidu Encyclopedia
2. Vue CLI configuration reference
3. Vue Router backend configuration example