Reprinted from: https://www.cnblogs.com/mmzuo-798/p/9273754.html
Recently, the company used vue for cloud platform products Most of the previous development was relatively smooth, but there were bug s in the later packaging and deployment
Now record which pits you encounter
1. I directly npm run build Package it and open index.html under dist directory A blank page appears on the page
no "NODE ENV" means that I did not specify which environment to package to
The correct package is npm run build:prod
2. About Vue router Because of the setting of mode:'history' in, the route cannot jump after my page is packaged
And the bug is syntax error, unexpected token<
But I removed the history and repackaged it
3. About Nginx configuration nginx.conf
Here, first review the nginx command and install nginx. Click here to view it
start nginx Start service tasklist /fi "imagename eqnginx.exe" Check to see if it starts nginx -s reload When changing the configuration file, restart it nginx Working process Close process nginx -s stop Shut down service nginx -s quit Safe shutdown taskkill /F/IM nginx.exe Close all nginx service
Next, sort out the correct packaging and deployment methods to nginx
Novice Xiaobai suggests in mode:hash Next run first
Step 1: package (mode:hash)
1. The first problem after packaging is to open index.html in dist, which does not display a page, but a blank page.
1, Open index.js in the config folder
As shown in the figure, change the assetspublic path to '. /'
Then package again and find that the content of the route is illegally rendered without any errors,
2, Comment out the model in the route
3, Open index.html in dist again and you can see the page. If the route is correct, it means that you can get the dis directory to nginx for deployment
Step 1: package (mode:history)
1, Packaging is a direct write / root path, not a relative path
Step 2: how to deploy nginx
1. Copy the dis directory to the html folder under nginx
2. Open the nginx.conf configuration file
The code is as follows:
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 8082; #Customize the port number of your server server_name localhost; #Customize your IP or domain name. localhost: 127.0.0.1 local IP #charset koi8-r; #access_log logs/host.access.log main; root E:\work\aiotcloud\yihao01-web-management\dist; #dist directory points to your local working directory, which is very important index index.html index.htm; #The default file to open is index.html
#The official website introduces that setting this route can solve the problem of history routing location / { try_files $uri $uri/ /index.html; }
#####################################
# The following addresses are nginx Proxy the address of the background server and then forward it to the front end to solve the cross domain problem
#######################################
# Module 1 location /securityAuthentication/{ proxy_pass http://192.168.0.16:6804; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } # Module 2 location /admin/{ proxy_pass http://192.168.0.16:6810; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } # Module 3 location /permission/{ proxy_pass http://192.168.0.16:6810; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } # Module 4 location /configurationManagement/{ proxy_pass http://192.168.0.16:6812; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } # Module 5 location /device/{ proxy_pass http://192.168.0.16:6806; add_header Content-Type "text/plain;charset=utf-8"; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST'; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
3. Open the command window with Win + R and click cd Go to nginx folder, start Nginx start service
4. Enter localhost:8082 in the browser You can see the page of nginx service startup!
