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’即可
}
}
}
},
}
完美解决问题