文章背景
在公司写好了一个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地址}