Vue-cli project to deploy Nginx server

0. Nginx use

With windows version, for example, download niginx archive and extract to any directory, double-click nginx.exe, access the browser HTTP: // localhost , if the Welcome page appears to nginx indicates success!.

nginx common commands is as follows:

nginx -h # Open help 
nginx -t # Check the configuration file is correct 

# The following commands to perform the first start nginx 
nginx -s stop # stop 
nginx -s quit # exit 
nginx -s reopen # restart (note not re-read take the configuration file) 
nginx -s reload # reread the configuration file

1. Deploy the project to the root directory of Nginx

For projects vue-cli create, modify vue.config.js file (located in the root directory of the project, if not create your own):

= {module.exports 
// port development environment used 
devserver: { 
Port: 8001 
}, 
// cancel the generated map files (files can accurately map the output of which row which column is wrong) 
productionSourceMap: to false, 
// development environment path and deployment environment 
publicPath: process.env.NODE_ENV === 'Production' 
'/'? 
: '/ My /', 
configureWebpack: (config) => { 
// increase-Loader iView 
config.module.rules [0 ] .use.push ({ 
Loader: 'iView-Loader', 
Options: { 
prefix: to false 
} 
}) 
// use the command line vue inspect> o.js can check the modified configuration file webpack 
} 
}

Vue in the project root directory command npm run build output file is created, copy all the contents of the dist folder to the webapp / directory under nginx within (if not create your own).

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

location / {
root webapp;
index index.html index.htm;
}

Use the command nginx nginx -s reload in the root directory into your browser by // localhost: http access to the project.

2. Multiple projects to deploy Nginx

Sometimes a Nginx put in several sub-projects, will need to access different projects through different paths.

For the purposes of item 1, amend publicPath vue.config.js file:

publicPath: '/vue1/'

For item 2, the modification publicPath vue.config.js file:

publicPath: '/vue2/'

Vue command were used in the project root directory run build creates an output file npm, copy all the contents of the dist folder to the webapp / directory under nginx vue1 and within webapp / vue2 (If not, create your own).

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

location /vue1 {
root webapp;
index index.html index.htm;
}

location /vue2 {
root webapp;
index index.html index.htm;
}

Use the command in nginx nginx -s reload root directory can be in the browser via HTTP: // localhost / vue1 , // localhost / vue2: HTTP access to item 1, item 2.

3. Port Agent

When the rear end of the current program are deployed on the same machine, since not use the same port, so that the rear end will generally port number set to different values (e.g. 8080), but also add to the resource request when the rear end of the current upper port, seems a bit of trouble, it can use on the specified path nginx front end to the rear end 8080 of the agent ports.

Increased location in conf / nginx.conf file:

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

In this way, the current Client Access / api path, actually accesses http: // localhost: 8080 / api path.

Vue-cli project to deploy Nginx server

You may also be interested in the article:

Guess you like