- 安装nginx,这边采取较为就方便的rpm安装,安装完成后执行nginx -V,如果能看到版本则成功。
rpm -ivh http://nginx.org/packages/centos/8/x86_64/RPMS/nginx-1.20.2-1.el8.ngx.x86_64.rpm
systemctl enable nginx.service
systemctl start nginx.service
- 安装完成后,我们将vue项目进行build。
npm run build
- 打包完成后,目录下会出现一个叫dist的目录,将目录下的所有文件上传至服务器/usr/share/nginx/html/目录下。
- 访问服务器地址即可看到vue项目页面。
补充:
如果是直接访问不了,请关闭selinux,防火墙放行80端口(如果是云服务器还要添加安全规则)。
部署完成后会出现刷新后404的情况,解决方案如下:
vim /etc/nginx/conf.d/default.conf
在location里添加一行:
server {
listen 80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html; #需要添加的
}
之后再刷新后就不会404了。