我们点击任意一个链接或者按钮或者刷新界面,这时候出现了404:
刷新之后nginx就找不到路由了,这是为啥,得和你们科普一下,vue项目的入口是index.html文件,nginx路由的时候都必须要先经过这个文件,所以我们得给nginx定义一下规则,让它匹配不到资源路径的时候,先去读取index.html,然后再路由。所以我们配置一下nginx.conf文件。具体操作就是找到location /,添加上一行代码try_files $uri $uri/ /index.html last;如下:
- nginx-1.18.0/conf/nginx.conf
location / {
root html;
try_files $uri $uri/ /index.html last;
index index.html index.htm;
}
这一行代码是什么意思呢?try_files的语法规则:格式1:try_files file … uri,表示按指定的file顺序查找存在的文件,并使用第一个找到的文件进行请求处理,last表示匹配不到就内部直接匹配最后一个。
重启nginx之后,链接再刷新都正常啦。但是没有数据,所以我们去部署一下后端。windows环境nginx的重启我一般都是打开任务管理器直接干掉nginx进程,然后再重新双击的~~
1.2、后端
后端的打包就简单多了,应该大家都挺熟悉的,注意配置redis、mysql的链接密码啥的,然后执行命令,本机测试,redis和mysql我都已经提前安装好的了,sql文件也在vueblog-java的resources目录下。
对了,pom.xml文件里面,spring-boot-maven-plugin之前注释掉了,现在一定要打开。不然执行jar会找不到主类。
- pom.xml
执行打包命令:
跳过测试打包
mvn clean package -Dmaven.test.skip=true
得到target下的vueblog-0.0.1-SNAPSHOT.jar,然后再执行命令
java -jar vueblog-0.0.1-SNAPSHOT.jar --spring.profiles.active=default
后端上线之后,我们再访问下前端,发现已经可以正常浏览网页啦!spring.profiles.active表示指定环境配置文件。
2、linux环境
linux环境部署相对复杂一点,因为我们还要部署redis、mysql等。之前我发布过一个视频,是部署传统的博客项目eblog,采用的是docker容器,但是我们没有docker compose进行编排,这次我们使用docker compose来编排我们的服务,一起性搞定部署。
二话不说,我们先来安装