适用于：MVVM前后台分离开发并部署
前端部署：Vue + Nginx
后端部署：Spring Boot + Tomcat
这篇文章只讲前端部署
服务器版本：Ubuntu 20.04.3 LTS
操作系统：macOS 12.2.1
文章目录
Step1：服务器上安装 Nginx
Nginx版本：nginx/1.18.0 (Ubuntu)
1、安装nginx
apt-get install nginx
2、检查nginx是否安装，输入如下命令后若出现版本号则安装成功
nginx -v
3、启动nginx
server nginx restart
4、在浏览器输入ip地址，若出现如下页面则启动成功
Step2：打包上传Vue项目到服务器
1、Vue项目配置跨域
在 vue.config.js 中进行如下配置：
module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: false,
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
/* 上线用（配置跨域） */
proxy: {
'/api': {
target: '接口地址url',
// 允许跨域
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
2、Vue项目打包：
npm run build
打包完成后，会在项目根目录下自动生成一个默认dist文件夹
3、上传至服务器指定文件夹下
这里我放在服务器的 /root/front_end 文件夹下
上传命令：
scp -r [dist文件夹所在的绝对路径] [服务器用户名]@[服务器IP地址]:[目标服务器文件夹绝对路径]
以我的举例：
Step3：配置 Nginx
1、在服务器上找到Nginx安装位置
默认在/etc/nginx
2、打开 /etc/nginx
cd /etc/nginx
3、创建 hosts 文件夹
mkdir hosts
4、创建文件 [随便起名字].host
文件内容如下：
server {
listen 3000; # 自己设置端口号
server_name njupt_patent; # 自己设置项目名称
location / {
root /root/front_end/dist; # 这里写vue项目的所在地址
index index.html; # 这里是vue项目的首页，需要保证dist中有index.html文件
}
# 跨域配置
location /api/ { # 会将接口地址/api开头的全部替换文下边配置的地址
proxy_pass http://[接口地址url]; # 接口服务地址
}
error_page 500 502 503 504 /50x.html; # 错误页面
}
5、修改nginx.conf
安装nginx后，nginx的默认目录是/etc/nginx
在该目录中有nginx.conf文件，打开 /etc/nginx 后，输入如下命令，使用vi打开该文件：
vi nginx.conf
在 nginx.conf 中找到如下两行：
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
在后面增加一行：
include /etc/nginx/hosts/*.host;
增加后效果如下：
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
include /etc/nginx/hosts/*.host;#新添加的一行
6、重启nginx
nginx -s reload
Step4：授权访问服务器中的文件夹
在服务器中打开 dist 所在的文件夹的上级文件夹，如：我的 dist 文件夹的绝对路径为 /root/front_end/dist ，那么就打开：
cd /root/front_end
输入如下命令授权访问 dist 文件夹：
chmod -R 777 dist
Step5：访问已经部署好的Vue项目
在浏览器输入：
即可进行访问
