使用Nginx部署Vue前端项目

文章背景

在公司写好了一个Vue网页项目，已经调整好了Vue静态文件访问路径，可以通过本地来直接访问到打包后的Vue项目。如果我不放到SpringBoot的静态文件来打成jar包当作JavaWeb项目来访问，我要直接在服务器部署静态网页应该怎么做？

唠叨一下vue打包的几个问题
1.css静态资源无法访问问题，解决方案是将 config下的index文件下的build项的assetsPublicPath属性改为./；
2.引用static文件下的静态文件之间以static开头即可，不要/static这样引用static目录下的文件，不需要/，vue会直接匹配static到static文件夹;
3.若引入了element-ui中的图标和字体文件无法被访问则需要在build下的utils.js
文件中找到以下这段代码加入publicPath: '../../'属性即可

所需工具

• 腾讯云服务器
• CentOS操作系统
• Nginx

部署流程如下

# 下载Nginx，可以访问 http://{你的ip地址} 出现nginx欢迎页表示nginx下载成功
yum install nginx
# 设置开机启动
systemctl start nginx.service
# 进入Nginx安装目录配置映射目录
cd /etc/nginx
vim nginx.conf
# 在locatino项下加入两个属性(具体如下图 ⬇️所示）
root ‘你的网页资源所在位置’
index index.html index.htm # 入口文件
# 进入nginx目录重启nginx 让配置文件生效
cd /etc/nginx
nginx -s reload
# 访问
http://1.14.141.51/#/

具体配置映射路径和文件：

访问，判断是否部署成功：
http://{你的ip地址}