vue项目部署到nginx（超级详细）以及报错解决

今天药忘吃喽~ 2021-09-13 18:10 1376阅读 0赞

# vue项目部署到nginx（超级详细） #

系统：ubuntu20  
安装nginx：  
可以先创建一个nginx目录，我的目录在 /usr/local/nginx下

# 一、安装nginx #

**1. 安装依赖**

$ sudo apt-get install gcc zlib1g-dev libpcre3 libpcre3-dev libssl-dev

**2. 下载nginx**

$ wget https://nginx.org/download/nginx-1.13.4.tar.gz

也可以手动下载：nginx官网 ：http://nginx.org/en/download.html  
**3. 解压并进入目录**

$ tar -xvf nginx-1.13.4.tar.gz
    $ cd nginx-1.13.4/

**4. 编译和安装**

$ ./configure
    #编译
    $ sudo make
    #编译成功之后，就可以安装了
    $ sudo make install

**5. 查看nginx版本**

#进入nginx安装目录
    $ cd /usr/local/nginx/

**\# 查看版本**

$ sbin/nginx -v
    nginx version: nginx/1.13.4

**6. 启动【我安装到 /usr/local/nginx目录下了】**

$ sudo /usr/local/nginx/sbin/nginx

**\#查看是否启动成功 端口默认是80端口**

$ curl 127.0.0.1

\#如果返回html 里面有 Welcome to nginx! 则成功

## **8、启动nginx** ##

**进入/usr/local/nginx/sbin目录，输入./nginx即可启动nginx**

./nginx

如果启动报错：nginx: \[emerg\] bind() to 0.0.0.0:80 failed (98: Address already in use)，说明80端口被占用，使用如下命令：

fuser -k 80/tcp

**关闭nginx**

./nginx -s quit  或者 ./nginx -s stop

**重启nginx**

./nginx -s reload

**查看nginx进程**

ps aux|grep nginx

## 9、设置nginx开机启动 ##

只需在rc.local增加启动代码即可。

vim /etc/rc.local

按键盘 i 然后在底部增加：

#/usr/local/nginx 你的nginx安装的路径
    /usr/local/nginx/sbin/nginx

## nginx安装完成 ##

# 二、部署项目 #

**1、打开vue项目，在控制台输入**

npm run build

这是我打包好的：默认会生成一个disk文件  
![在这里插入图片描述][20210104155416123.png]

**2.进入nginx安装目录下，有一个html文件，默认里边有一个index.html文件，删掉**

rm -rf *

**3、把生成的dist目录下的静态资源传输到服务器**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]  
**4、修改配置文件**  
此外，进入cd /usr/local/nginx/conf目录可修改nginx的配置文件：

vim nginx.conf

这是我的：

server { 
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log logs/host.access.log main;
    
            root   html; #配置自己的静态文件的路径，就是刚刚将打包的vue项目上传的路径，我这里是nginx根路径下的html文件中
    
            location / { 
                 # root html;
                index  index.html index.htm;
                try_files $uri $uri/ /index.html;
                #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404，两种写法，这里需要在下边配置router
               # try_files $uri $uri/ @router;
     
            }
            # location @router{ 
            # rewrite ^.*$ /index.html last;
            #}
    
           # 6、这里是解决跨域问题，将你后端的地址写在proxy_pass 后面就可以了 
           
            location /api/ { 
                #rewrite ^.+api/?(.*)$ /$1 break; #这样写有问题,在网上看有人这样写，发现有问题
                rewrite ^/api/(.*)$ /$1 break;  #必须的写这个，使用nginx的rewrite对uri进行重写 下面这行也要改为api 
                proxy_pass http://10.1.0.111:8888/; #跨域转发路由地址
                proxy_redirect off;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            }
    
            #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;
            }

这样就可以了  
记得要开启端口号

## 5、开放 8080 端口 ##

ubuntu  
**1、检查防火墙状态**  
ubuntu

sudo ufw status

centos

sudo ufw disable

running 表示防火墙是开启的，如果你看到的是 not running，则表示防火墙关闭，

**2、关闭防火墙：**  
ubuntu

firewall-cmd --state

**3、开放 8080 端口**  
ubuntu

sudo ufw allow 22

centos：

firewall-cmd --zone=public --add-port=8080/tcp --permanent

4、重启防火墙

systemctl restart firewalld.service

5、重新载入配置

firewall-cmd --reload

## 6、重启nginx ##

在/nginx/sbin/目录下

重启：

./nginx -s reload

查看nginx进程：

ps aux|grep nginx

# 报错解决： #

**1、404: Connection refused) while connecting to upstream, client: 172.16.54.1, server: localhost, request: “POST /api/accountApi/accoun t/loginAccount HTTP/1.1”, upstream: “http://10.2.0.126:8888/api/accountApi/account/loginAccount”, host: "172.16.5**  
一般在nginx.conf中配置不对，跨域访问就会出现404，找不到页面的情况：  
一般安装我上边跨域配置，就不会出现了。

2、vue项目，npm run build时点击路由切换，第一次点击没问题，再点不会切换报错如下图  
Uncaught SyntaxError: Unexpected token ‘＜‘  
![在这里插入图片描述][20210104161229905.png]  
因为在将我的项目（在路由中用了懒加载）改为 history模式的过程中，有时候发现会出现chunk加载出错的情况，打开chrome的network发现那个chunk加载404了，是因为请求的url中多了一层路径。我在这里发现了解决方案。

LinusBorg说，因为在 history模式中切换路由时，我们是真正改变了页面的url路径，所以webpack的runtime会认为它位于 example.com/some/path。如果 publicPath是设置的相对路径，那么webpack加载chunk时可能会变成 example.com/some/path/static/js/3.js这样的路径，然而chunk的真正路径是 example.com/static/js/3.js，所以我们需要将 publicPath设置为绝对路径（ publicPath: ‘/’）来解决这个问题。  
具体查看[：https://www.jb51.net/article/162268.htm][https_www.jb51.net_article_162268.htm] 讲解很详细  
解决访问：在config.index中加上：

module.exports = { 
        publicPath: '/',
    }

完整的：

module.exports = { 
     publicPath:'/', //配置该路径，nginx中，进行路由转发，才可找到
     devServer: { 
        historyApiFallback: true,
        open: true,
        proxy: { 
          '/api': { 
          
          //  target: 'http://localhost:8888/',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,    //這裡true表示实现跨域
            pathRewrite: { 
              '^/api': '/' //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
            }
          }
        }
      },
    }

完美解决问题

[20210104155416123.png]: /images/20210913/63c752792fe0422d8fd95cd45b9eb3d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]: /images/20210913/f4962e483cb9472c9ad6fac03b162f43.png
[20210104161229905.png]: /images/20210913/20c8718fb8dc4a8eac613bb2b72d75af.png
[https_www.jb51.net_article_162268.htm]: https://www.jb51.net/article/162268.htm