The packaging of niapp must first be configured. After the configuration is completed, it can be packaged, as shown in the figure. This is just the first step.
Notice:
1. It is best to use ./ for the basic running path. If other paths are configured, please add the path yourself.
2. Due to the characteristics of uniapp, the history mode is not supported, and only the hash mode is supported (the path will contain #)
3. Never check tree shaking optimization (if the project references other components, the error node module cannot find the component will be reported. In fact, due to tree shaking optimization, some unused components are cut out, causing the node module to fail. missing)
The above is just the first step, the configuration of the second step is coming.
1. The path of pubilcPath must be consistent with the basic running path in the above figure. This is the first point.
2.disableHostCheck should be set to true (disable access to the local host file)
3. The base of the router is best set to ./ (consistency, I have not tried using it and adding other ones will make any difference)
4. Domain is the address of the server. Remember to change it to your own local address or the address of the server.
5. After reading the picture below, the code will be attached, which you can copy and paste.
"template" : "",
"domain" : "192.168.0.74",
"router" : {
"mode" : "hash",
"base" : "./"
},
"publicPath" : "./",
" devServer" : {
"disableHostCheck" : true, //Prohibit access to the local host file
// "https" : true,
// "port" : 8080,
"proxy" : {
"/api" : {
"target" : "http ://192.168.0.202:8080", //The address of the backend server
"changeOrigin" is used here: true,//Whether it is cross-domain
"secure" : true, // Whether it supports the https protocol proxy
"pathRewrite" : {
"^/api" : ""
}
}
},
"port" : 8080,
"https" : true
},
After the above configuration is completed, you can package it.
Just click on the picture to find out.
Find the packaging of H5
Enter the URL title and server name (for local nginx, use the local address), then select Release and it will be packaged.
After typing, this picture will appear. If the selected part appears, the packaging is successful and can be deployed.
Find your project path and find the packaged folder. Take the following picture for example (this H5 is what you want to use, the content of the entire file is. )
Deployment of local nginx:
1. Find your nginx (personal version: 1.18.0)
2. Create a folder in your nginx root directory, such as the picture below.
3. You can change the name (admin) to any name you want, and then open it. Throw in the H5 folder you just packed.
Next, start configuring the path of nginx.
1. First find the conf folder
2. Next click in, find the nginx.conf file, and open it
Find the server object
Note: The port here must be the same as the port set before packaging, otherwise it will not be found.
The root in the location object is the name of the folder you just created under the server. The /h5/ link is to distinguish it from other paths.
#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 8888;
server_name localhost;
root html;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root dist;
try_files $uri $uri/ /index.html;
}
location /prod-api {
proxy_pass http://192.168.0.202:8080; #后端服务器
rewrite /prod-api/(.*) /$1 break;
client_max_body_size 1000m;
}
location ^~ /admin {
try_files $uri $uri/ /admin/index.html;
}
#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;
# }
#}
}Finally, let’s learn a few commands to start nginx
1. start nginx (first startup command)
2.nginx -s reload (command started after updating configuration)
3.nginx -s stop (command to stop nginx and shut down the server)
Finally, you can open the access directly. (The /h5/ connected behind the location configured by nginx is connected here. If it is not connected, an error 404 will be reported)
If an error is reported after connecting, check whether the path is written correctly. If you follow my diagram and my code, you can get there directly, dear.
For example: http://192.168.0.74:8080/h5/ (this will jump to the default homepage set by your code), as shown in the figure:
Finally, I attach an original blog written by a lovely lady. Her content has been of great help to me.
So I also wrote it again, the content is more detailed, just click on the picture to find it.