Windows环境部署

前端

  • axios.defaults.baseURL = "http://localhost:8080",配置的是前端访问后端接口的服务。

  • 前端部署还需考虑一个问题:打包之后项目资源引用路径,比如我们打包后链接是否需要带项目名称等。按照Vue官方的部署说明,我们需要添加一个vue.config.js文件:module.exports = { publicPath: '/' }

  • 执行打包命令:npm run build,把打包出来的dist文件夹内的所有文件(不包括dist文件夹)都复制到nginx的html文件夹中。

  • 启动nginx,然后浏览器输入http://localhost,就可以访问到我们的vue项目,nginx默认端口是80。

  • 我们点击任意刷新界面,这时候出现了404,这是因为刷新之后nginx就找不到路由了。

    • vue项目的入口是index.html文件,nginx路由的时候都必须要先经过这个文件,所以我们得给nginx定义一下规则,让它匹配不到资源路径的时候,先去读取index.html,然后再路由。
    • 所以我们配置一下nginx.conf文件。具体操作如下:
1
2
3
4
5
6
7
    location / {
root html;
try_files $uri $uri/ /index.html last;
index index.html index.htm;
}

try_files的语法规则:按顺序检查文件是否存在,返回第一个找到的文件。结尾的斜线表示为文件夹 -$uri/。last表示如果所有的文件都找不到,会进行一个内部重定向到最后一个参数。

重启nginx之后,页面再刷新就正常了。


后端

  • 配置好数据库等链接和密码

  • 执行打包命令:

    1
    2
    # 跳过测试打包
    mvn clean package -Dmaven.test.skip=true
  • 得到target下的vue-0.0.1-SNAPSHOT.jar,然后再执行命令:

    java -jar vue-0.0.1-SNAPSHOT.jar

  • 后端上线之后,我们再访问下前端,发现已经可以正常浏览网页了。

Linux环境部署

  1. 安装Nginx

  2. 配置Java环境

  3. 防火墙开放所需端口,像mysql的3306,nginx的80,后台服务的8080端口等;如果部署在云服务器上,还需在云服务器的管理页面中将端口加入安全组才可以访问。

  4. 在Linux上安装Mysql,导入所需数据表。

  5. 部署前端项目,与Windows大致相同。

  6. 后端项目也类似,将打包后的jar包上传至服务器的任意位置,再执行命令:nohup java -jar vue-0.0.1-SNAPSHOT.jar &,这时后端服务就会在后台自动运行,且输入日志到当前目录下的一个文件中。

注意:vue项目中配置好axios的url;springboot中配置好远程主机和端口,密码等。