前几天看[小猪课堂发布的nginx部署](https://zhuanlan.zhihu.com/p/431796992)，跟着做了一遍，由于本人是第一次尝试，遇见了很多问题。经过查阅和搜索，终于解决掉了。下面给大家介绍一下我的流程和遇见的问题，我们可以多讨论。
项目打包部署
1. Preparations
A complete Vue project
A server
The preparations are very simple, you only need a project and a server, and the project can even be just an html file.
2. Initialize the Vue project
Use vue-cli scaffolding to build the simplest project, vue create project name, and then use npm serve to run the project,
In this way, our front-end project is running. 3. Installing Nginx on the
server
Widely used, our website is deployed on an Nginx server. Of course, you can also choose other web servers, here we use the mainstream Nginx.
My server here is a Centos system, so I will use Centos as an example.
Setting up the server To
download the virtual machine software, you first need a suitable image to build the server. To download the image, you can go to Ali https://developer.aliyun.com/mirror/?spm=a2c6h.25603864.0.0.a21c66ed4X1vdL to download
When downloading, it is recommended not to use the min version, because it is too streamlined and many instructions cannot be used, so feel free.
After downloading, install the mirror image, all the way to default.
If encountered during installation
Choose to install the operating system later. Select linux for the system type, modify the hardware settings by default all the way, and modify them in the virtual machine settings
After that, start the project normally, and finally come to the server to install nginx.
Install nginx
on the server and enter the yum install -y nginx command on the server to install nginx.
If it prompts that nginx cannot be found, it means that we need to change the source. The command
rpm -uvh http://nginx.org/packages/centos/7/ noarch/rpms/nginx-release-centos-7-0.el7.ngx.noarch.rpm
Reinstall nginx after the source is changed successfully. Use the command whereis nginx to determine whether nginx is installed successfully.
4. Start nginx,
enter nginx on the server and press Enter.
Enter the command netstat -ntlp to view the port occupancy, and you can see that nginx is occupying port 80.
At this point, we open the browser, enter the virtual machine ip and press Enter to see the following figure, that is, nginx starts successfully.
If nginx is started, but the web page cannot be seen after entering the ip, the reason may be that port 80 is not open. For the solution, see the solution that
CentOS cannot access port 80 after installing Nginx.
To stop nginx, enter the command nginx -s stop.
5. Modify the nginx configuration file.
Use the command whereis nginx to query the installation directory of nginx. Generally speaking, /etc/nginx is the storage location of nginx configuration files. cd /etc/nginx to enter the modification folder. Modify the nginx.conf file, find listen 80 in the target server, and modify port 80 to port 9000 (if port 9000 is not open, remember to open the port first). Change the path corresponding to root to the path where the package you are about to upload is stored. It is recommended to change it to /home/www/dist. Then launch Save. Modify nginx.conf to use the vim command .
But my file is a bit special. The default configuration file directory is default.conf under the /etc/nginx/conf.d folder.
After modification, enter the command nginx -s reload to restart.
6. Create a new project folder
. It is recommended to create a new www folder in the home folder. The specific operation is to command cd /home to enter the home folder, command mkdir www to create a new www folder, and the dist folder does not need to be created, because after our subsequent projects are packaged The file is a dist folder.
7. Package and deploy the vue project
Back to our vue project, use npm run build to package the project. After packaging, a dist folder will be generated in the project. Then upload to the server.
There are two ways to upload.
The easiest way is to use the ftp tool to drag and drop to upload. For example finalshall
The second way to use the command is to open the cmd window in your project and enter the command
scp -r dist/ [email protected]:/home/www The blue part is ip, remember to replace your own ip.
(If you don't know the ip, you can use the command ifconfig on the server to observe the ip)
At this point, we open the browser and enter our ip:9000 to observe our project page
8. Solve the 404 problem of refreshing the route.
When we switch the route and then refresh the page, 404 will appear. This is because our vue project adopts the history routing method. The main reason is that vue is a single-page application, and you can learn about the details by yourself.
Solution to the problem:
(1) Change the routing mode to hash
(2) Modify the nginx configuration:
location / { try_files $uri $uri/ /index.html; — Solve the page refresh 404 problem } After modification, restart nginx and refresh at this time There will be no 404 in the browser.