这里记录了在Linux系统上使用Nginx服务器部署Vue项目的过程🤪

1. 上传打包文件

使用Xftp将打包好的项目文件上传到/usr/local/webapp路径下。

2. 修改配置文件

1
vim /usr/local/nginx/conf/nginx.conf

修改如下

1
2
3
4
5
6
7
8
9
server {
  listen 80;
  server_name localhost;

  location / {
    root /usr/local/webapp/项目名;
    index /index.html;
  }
}

3. 启动服务

重新载入配置文件并重启Nginx🍙

1
2
3
./nginx -s reload
./nginx -s stop
./nginx

可以发现项目部署成功啦，输入自己服务器公网IP查看项目部署情况

4. 一些问题

4.1 网站图标

这里显示的是Nginx的favicon，如果没配置这个，即使项目弄好了favicon，部署好项目之后仍然不会显示favicon。所以要为Nginx配置favicon。

修改配置文件，在server中添加如下代码

1
2
3
4
# favicon
location =  /favicon.ico {
  root  你的favicon.ico文件路径;
}

清理缓存，重启浏览器即可看到图标显示了。

4.2 跨域

已经重复很多次跨域这个问题了😂，这次使用服务器部署Vue项目，配置好代理，就不存在数据有时加载不出来的问题啦。

首先项目中的链接直接设置为/api开头。

然后修改nginx.conf

1
2
3
location ~ /api/ {
  proxy_pass API域名(不要带定位符，即单斜杠🤔);
}

重启Nginx服务器就🆗啦

5. 参考