Vue-CLI project is deployed to the NGINX server

0. Nginx uses

Take the Windows version as an example, download the Niginx compressed package and extract to any directory, double-click Nginx.exe, access http:// localhost in the browser If the Welcome to Nginx! Page appears, it will be successful.

NGINX common commands are as follows:

 NGINX -H # Open Help Nginx -t # Check if the configuration file is correct # 以下 以下 n n n 才Perform nginx -s stop # Stop nginx -s quit # Exit Nginx -s Reopen # Restart (Note Do not reread configuration file) Nginx -s reload # Re-read configuration file   

1. Deployment Projects to Nginx Root Catalog

For the item created by Vue-CLI, modify the vue.config.js file (located in the root directory, no words ” Created):

 MODULE.EXPORTS = {// Delivered DEVSERVER: {Port: 8001}, // Cancel to generate the MAP file (Map file can be accurate Which line is the wrong output?) ProductionSourceMap: false, // Develop the environment and deploy the environment path PUBLICPATH: Process.env.node_env === 'products'? '/': '/ My /', configureWebPack: ( CONFIG) => {// Add IView-loader config.module.rules [0] .use.push ({loader: 'iview-loader', options: {prefix: false}}) // use the command line vue inspect> o.js can check the modified configuration file webpack}}   
in order to use the root directory of the project vue npm run build to create an output file, copy all the contents of the folder to dist webapp / nginx under the directory (if not self-created).

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

 location / { root webapp; index index.html index.htm;}   
can be used by nginx -s reload command http browser in the root directory nginx: // localhost access project.

more than 2 project to deploy Nginx

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

1 for the project, the file modification publicPath vue.config.js:

publicPath: ‘/ vue1 /’

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

publicPath: ‘/ vue2 /’

were used in order vue project root directory npm run build create the output file, copy all the contents dist folder to ngiWebApp / Vue1 and WebApp / Vue2 in the NX directory (no words are created themselves).

Modify the conf / nginx.conf file in the nginx directory, in the http -> Server node, modify the contents of the Location section:

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

Use the command nginx -s reload to use the command nginx -s reload in the nginx root directory to access items 1, HTTP: // localhost / vue2 access item 1, project 2.

3. Port Agent

When the rear end item is deployed on the same machine, since the same port is not used, the end is generally port number. Set to different values ​​(eg 8080), but the current end requests resources to the rear end number, it is not avoided, so it is avoided, so it is possible to use the specified path of the front end to the 8080 port of the rear end with Nginx.

In the conf / nginx.conf file:

Location / API {proxy_pass http: // localhost: 8080 / API;}
In this way, when the current end accesses the / API path, the HTTP: // localhost: 8080 / API path is actually accessed.

The above is a method of deploying the Vue-CLI project to the NGINX server. I hope to help everyone. If you have any questions, please leave a message, Xiaobian Will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

If you think this article helps you, welcome to reprint, please indicate the source, thank you!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment