Package vue project
npm run build
Notice:
Path configuration for static files
The stupidest method: (I found a lot of configuration path methods on the Internet, but they didn’t solve it)
First package it once, after running, what is the request path for the static file that cannot be found, then go to the local project to change it, and package it again
shortcoming:
Online and local cannot be satisfied at the same time
Cross domain
It is best to let the backend do the cross-domain, so that there will be no various problems after packaging
For example, the python backend
Two lines of code solved it.
The front end only needs to request the interface normally.
Local test run
-
Install server
npm i -g serve
-
enter Packaged dist folder
cd dist
-
Run
serve
If there is no problem with the project configuration, the request can be successful here.
server installation nginx
nginx is a reverse proxy. If you only access the intranet yourself, you don’t need to configure nginx, you can skip this step.
Check if there is nginx
where is nginx
Install nginx
npm install -y nginx
View version number
nginx -v
Indicates that the installation was successful
Start nginx
nginx
Access server
The following interface means that the startup is successful
The default access here is port 80, and the default port of nginx server is 80. If you cannot access, there are roughly several reasons:
Port process is occupied
nginx is not started
nginx configuration error
Port 80 is not added to the server security group
Among them, the port process is occupied, as follows:
view current process
netstat -ntlp or netstat -tunlp
kill process
kill 52161
Check the process again, if port 80 is still occupied, then kill until there is no port 80 process
Start nginx
Start successfully, access the server
Stop nginx service
nginx -s stop
Restart nginx service
nginx -s reload
Modify nginx configuration
Find the configuration file storage location
where is nginx
At this point /etc/nginx is the configuration file location
cd /etc/nginx
nginx.conf is the default configuration file, edit the file
vim nginx.conf
You can see that the default port is 80
You can change the default port —- i switch to edit mode esc exit edit mode :wq save and exit More vim operations check documents
Restart nginx
At this time, accessing port 80 again will report an error, just access the modified port
Check the configuration file again, the port is modified
Modify the storage path of the website
Suppose it is /home/nmk/www/dist
Restart nginx service again
404 because the accessed folder does not exist
At this point, switch to /home/nmk
cd : change directory
ls : view the files in the current directory
New www folder
mkdir www
Then ls will add a www folder
There is no need to create a dist file, because the vue project will be automatically placed in the dist file after packaging
Front-end project upload
Front-end project packaging
npm run build
Upload the folder to the www folder of the server
—Operate in cmd
scp file path request server: target path
If the upload fails, compress the dist and upload it again
Access server
If nothing else, you can successfully access the project
If something goes wrong, for example:
403 Unauthorized access
Switch to /var/log/nginx
cd /var/log/nginx
vim error.log
You can view the error message
It can be seen that index.html has no permission to access
Switch to /home/nmk/www/dist
cd /home/nmk/www/dist
View file access users
ll
Switch to /etc/nginx
cd /etc/nginx
edit configuration file
vim nginx.conf
change to root
Just restart nginx
404 Not Found
(1) Change the routing mode to hash
(2) Modify nginx configuration:
vim nginx.conf
just restart
403 No permission
404 Not Found
405 Unacceptable Request Method
Static files are not allowed to respond to POST requests, change to get requests
304 Not Modified
ETag:, compared with the cache, the value has not changed, and the cache can be forcibly cleared.
200 Request no result
but as follows
502 Unable to respond properly
For other errors, check in error.log to check related solutions
Access to XMLHttpRequest at ‘http://192.168.1.104:70/mol’ from origin ‘http://192.168.1.104’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
This is because the resources are not requested, such as database resources, the database is not opened, and it is not the front-end and back-end interfaces cross-domain
Summarize the above problems:
-
nginx configuration file problem
-
Backend interface problem
-
cross-domain issues
-
caching problem
-
request method
-
routing pattern
Analyze specific situations. If you encounter a problem, you can check it.
You can refer to the deployment of the entire front-end and back-end projects
https://blog.csdn.net/m0_51534164/article/details/129535227?spm=1001.2014.3001.5502