How to deploy Vue-cli project to Nginx server

0. Nginx use

Taking Windows version as an example, download the niginx compressed package and decompress it to any directory, double-click to access it in the browserhttp://localhost, if the Welcome to nginx! page appears, it means that it is successful.

Common nginx commands are as follows:

nginx -h  # Open Helpnginx -t  # Check if the configuration file is correct
# All the following commands must be started before they can be executednginx -s stop # stopnginx -s quit # quitnginx -s reopen # Restart (note that the configuration file will not be reread)nginx -s reload # Reread the configuration file

1. Deploy the project to the Nginx root directory

For projects created by vue-cli, modify the file (located in the project root directory, if not, create it yourself):

 = {
 // Ports used in the development environment devServer: {
 port: 8001
 },
 // Cancel generate map file (the map file can accurately output which row and which column is wrong) productionSourceMap: false,
 // Paths to the development environment and deployment environment publicPath: .NODE_ENV === 'production'
 ? '/'
 : '/my/',
 configureWebpack: (config) => {
 // Add iview-loader [0].({
  loader: 'iview-loader',
  options: {
  prefix: false
  }
 })
 // Use vue inspect > on the command line to check the modified webpack configuration file }
}

Use the command npm run build in the root directory of the vue project to create the output file, and copy all the contents in the dist folder into webapp/ in the nginx directory (create it yourself if you don't have one).

Modify the conf/file in the nginx directory, and in the http -> server node, modify the content of the location section:

location / {
 root webapp;
 index  ;
}

In the nginx root directory, use the nginx -s reload command to pass in the browserhttp://localhostVisit the project.

2. Deploy multiple projects to Nginx

Sometimes several sub-projects are placed in an Nginx, and different projects need to be accessed through different paths.

For project 1, modify the publicPath of the file:

publicPath: '/vue1/'

For project 2, modify the publicPath of the file:

publicPath: '/vue2/'

Use the command npm run build in the root directory of the vue project to create the output file, and copy all the contents in the dist folder into webapp/vue1 and webapp/vue2 in the nginx directory (if not, create it yourself).

Modify the conf/file in the nginx directory, and in the http -> server node, modify the content of the location section:

location /vue1 {
 root webapp;
 index  ;
}

location /vue2 {
 root webapp;
 index  ;
}

In the nginx root directory, use the nginx -s reload command to pass in the browserhttp://localhost/vue1、http://localhost/vue2Visit Items 1 and 2.

3. Port Agent

When the current backend projects are deployed on the same machine, since the same port cannot be used, the backend generally sets the port number to different values ​​(such as 8080). However, when the current end requests resources from the backend, it is troublesome. Therefore, the specified path of the frontend can be proxyed to the 8080 port of the backend using nginx.

Add location in conf/ file:

location /api {
 proxy_pass http://localhost:8080/api;
}

In this way, when the current access to the /api path, what is actually accessed ishttp://localhost:8080/apipath.

Summarize

The above is the method of deploying the Vue-cli project to Nginx server introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!