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顺序查找存在的文件,并使用第一个找到的文件进行请求处理,last表示匹配不到就内部直接匹配最后一个。
重启nginx之后,链接再刷新都正常啦。但是没有数据,所以我们去部署一下后端。windows环境nginx的重启我一般都是打开任务管理器直接干掉nginx