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

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文件

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

rm -rf *

3、把生成的dist目录下的静态资源传输到服务器

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 ‘＜‘

因为在将我的项目（在路由中用了懒加载）改为 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 讲解很详细
解决访问：在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’即可
        }
      }
    }
  },
}

完美解决问题