Vue is packaged and deployed to nginx

1. Package the vue project

The packaged commands may be different depending on the configuration of the project. The packaged commands can be viewed in package.json. The
insert image description here
configuration in vue.config.js in the project is as follows:
proxy is related to the need to configure the corresponding reverse proxy when our project is deployed to nginx

publicPath is related to whether we need to configure subpaths when deploying

By default, the application will be deployed in the root directory of the domain,
for example: https://www.my-app.com/
then the publicPath is: /
If your application is deployed in a subpath, you need to specify the subpath here
For example: https://www.foobar.com/my-app/
Then the publicPath is: /my-app/

Open the terminal and enter the command:

npm run build

The dist folder generated after packaging:
insert image description here
move the entire generated dist folder to the html folder in nginx:

Two, nginx configuration

Open the nginx.conf file in the nginx directory and the conf folder
insert image description here
for configuration:

    server {
    
    
        listen       9800; # 这里配置的是打开的端口号
        server_name  localhost; # 这个配置打开时的域名，由于是本地部署就直接使用localhost

        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
    
    
               # 项目所在路径，由于我们是一整个打包后的dist文件夹放到html目录下的，所以我们的路径就是html/dist/, 注意最后面必须加/
               root   html/dist/;  #项目所在路径，最后面必须加/
               index  index.html index.htm;
               # 匹配项目的入口页，因为是dist文件夹下的，所以路径是/dist/index.html, 注意前面必须加/
               try_files $uri $uri/ /dist/index.html;  #匹配项目的入口页，前面必须加/
        }
        # 下面的是反向的代理，解决跨域问题
        # ^~/api/sjjh/    ^~/api/ 与我们的vue.config.js中proxy是一一对应的
        # proxy_pass 是我们真实对应的 请求地址
        location ^~/api/sjjh/ {
    
    
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $remote_addr;
             proxy_pass xxxx;
        }
        location ^~/api/ {
    
    
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $remote_addr;
             proxy_pass xxxxx;
        }
      }

After the configuration is complete, save and start. You can click nginx.exe to start
insert image description here
the test. Open the browser and enter 127.0.0.1:9800. Note that the port number must be the same as the above configuration