使用nginx部署vue项目及常见问题

 1.windows版本下载 nginx

nginx: downloadhttp://nginx.org/en/download.htmlMainline所有功能都全的版本（推荐）
Stable version稳定版
Legacy versions老版本

cmd 下到nginx路径

查看版本：nginx.exe -V 
启动：start nginx
查看启动log：tasklist /fi "imagename eq nginx.exe"
快速关闭：nginx.exe -s stop
有序关闭：nginx.exe -s quit
查看关闭log：taskkill /f /t /im nginx.exe
重启：nginx.exe -s reload
检测端口是否被占用：netstat -ano | findstr "80"
静态资源存放： static -> location/下

2.在nginx中需要配置多个项目，所以需要配置多个server,配置如下：

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
      listen  81;
      server_name test;
       location / {
            root   html/test;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api/ {
            proxy_pass http://172.16.8.9:8888/;
        }
      error_page 500 502 503 504 /50x.html;
      location = /50x.html {
       root html;
      }
    }
    server {
      listen  82;
      server_name test2;
       location / {
            root   html/test2;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api/ {
            proxy_pass http://172.16.8.9:8888/;
        }
      error_page 500 502 503 504 /50x.html;
      location = /50x.html {
       root html;
      }
    }
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api/ {
            proxy_pass http://172.16.8.9:8888/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

步骤1：html 下创建多个文件夹，不同的项目放到不同的文件夹下
           如上：server_name为test2 的，访问路径就是 html/test2

---

步骤2：为不同的文件夹，配置不同的server, 端口号不同

步骤3：host文件去为server作映射
           host文件地址：C:\Windows\System32\drivers\etc
           打开host文件，
          添加如下代码：

127.0.0.1 test
127.0.0.1 test2

步骤4：访问
使用 test:81 ， 即可访问到 html/test 文件夹下面的项目
使用 test2:82 ，即可以访问 html/test2 文件夹下面的项目

 3.vue 项目部署流程

1.1 先下载 nginx ,然后解压到一个要记得的位置。

1.2 vue 项目文件的 vue.config 里要有这段代码

publicPath: process.env.NODE_ENV == 'production' ? './' : '/',

这个代码是判断你是否为开发者然后设置路径。

1.3 然后运行 npm run build 打包项目，最后生成一个 dist 文件夹。

1.4 打开 nginx 里面重要的文件夹就2个; 一个是html放页面文件的地方，把你dist里面的复制过来就行了。

1.5 还有一个是 conf 文件夹里面是放配置文件的，主要是用 nginx.conf ,里面找到 serve 这个对象，listen 80 这个是设置端口号，里面还有一个

location /｛            
   root   html;
   index  index.html index.htm;
｝

在里面加上

try_files $uri $uri/ /index.html

; 用于支持在 history 模式下，运行

1.6 最后还要在 serve 对象里面加一个

location /api/ {  
    proxy_pass http://192.168.1.91:8080/;
}

http://192.168.1.91:8080/这个就是后端的接口， 作用是在nginx 下设置代理

1.7 在文件夹( nginx 所在文件夹) 输入 cmd ， 然后输入 start nginx 就启动了

1.8 然后直接浏览器输入 localhost:80 就能访问到了

 4.部署常见问题

 1. 使用history模式，页面显示空白
  解决方法：将dist文件夹的内容，放到nginx服务器运行即可

2. vue 打包成dist后，代理跨域设置失效
 解决方法：使用nginx服务器运行，并在nginx服务器的配置文件中，进行代码配置
 配置代码如下：

location /api/ {
    proxy_pass http://172.16.8.9:8888/;
}

注：1. /api  变成  /api/
2. proxy_pass 设置的地址后面,一定要加 / 与分号

3. 解决子组件页新刷新显示404的问题，
    配置代码如下：

location / {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
}

 详见：【文章解读】使用nginx部署vue项目及常见问题_哔哩哔哩_bilibili