手把手教你Docker+nginx部署Springboot+vue前后端分离项目(1)

1.1、前端

先来配置一下后端的调用路径，因为现在部署在本地localhost，所以在axios.js中，我们配置好链接，因为等下后端部署也是本机，所以我这里直接这样配置就好了，如下：

• src\axios.js

axios.defaults.baseURL = “http://localhost:8081”

上面配置的就是前端访问后端接口的服务。然后前端部署还需要考虑一个问题：打包之后项目资源引用路径，比如我们打包后链接是否需要带项目名称等。按照Vue官方的部署说明，我们添加一个vue.config.js文件，

• vueblog-vue/vue.config.js

module.exports = {

publicPath: ‘/’

}

当然了，publicPath默认其实是空的，也就是publicPath: ‘’，两个效果貌似其实是一样的，哈哈哈，我只是提醒一下有这回事而已，嘿嘿。设置完毕之后，我们执行打包命令：

打包命令

npm run build

命令执行之后，我们在项目根目录下就可以找到一个dist的目录，这个就是打包之后的文件夹，里面有个index.html，但是我们点击直接打开是看不到任何内容的，这时候，我们需要部署到nginx中。 

首先我们下载一个nginx，下载地址：http://nginx.org/en/download.html，这里我们下载nginx/Windows-1.18.0版本，下载之后解压zip。根据我们对nginx的熟悉，静态文件我们放在html文件夹下面，所以先把html文件夹中的index.html和50x.html删掉，然后把打包出来的dist文件夹内的所有文件都复制到nginx的html中，如图：

双击nginx.exe启动nginx，然后浏览器输入http://localhost，出现了我们熟悉的界面，虽然没有博客数据，链接也自动跳转到了http://localhost/blogs，

我们点击任意一个链接或者按钮或者刷新界面，这时候出现了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顺序查找存在的文件，并使用第一个找到的文件进