·http://www.your-server.com/ 这是一级目录,由于项目多,一般会通过二级域名http://oa.your-server.com/或二级目录http://www.your-server.com/oa来发布,本篇记录一下二级目录发布。先看效果
1、router/index.js配置base
export default new Router({
base: "/oa",
mode: 'history', // 去掉url中的#
scrollBehavior: () => ({y: 0}),
routes: constantRoutes
})
2、vue.config.js 配置 publicPath
.env.prod 配置
# 后端API 转发uri
VUE_APP_BASE_API = '/oa/api'
# 二级目录配置
PUBLIC_PATH = '/oa'
vue.config.js 配置
module.exports = {
// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
publicPath: process.env.PUBLIC_PATH ? process.env.PUBLIC_PATH : '/',
// 在npm run build 或 yarn build 时 ,生成文件的目录
outputDir: 'dist/oa',
// 用于放置生成的静态资源 (js、css、img、fonts)目录, 相对于 outputDir
assetsDir: 'static',
}
3、vue 项目打包
npm run build:prod
4、将生成目录dist打包为dist.zip上传到服务器目录/home/,并完成解压
[root@hcss-ecs home]# ll dist
total 4
drwxr-xr-x 5 root root 4096 Apr 6 21:51 oa
[root@hcss-ecs home]# ll dist/oa/
total 48
-rw-r--r-- 1 root root 14336 Apr 6 21:51 favicon.ico
drwxr-xr-x 2 root root 4096 Apr 6 21:51 html
-rw-r--r-- 1 root root 11038 Apr 6 21:51 index.html
-rw-r--r-- 1 root root 3601 Apr 6 21:51 index.html.gz
drwxr-xr-x 3 root root 4096 Apr 6 21:51 libs
-rw-r--r-- 1 root root 26 Apr 6 21:51 robots.txt
drwxr-xr-x 6 root root 4096 Apr 6 21:51 static
[root@hcss-ecs home]#
5、配置Nginx
location / { ## nginx 默认配置
root /usr/share/nginx/html/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /oa { ## 前端oa项目
# root /usr/share/nginx/html/;
root /home/dist/;
index index.html index.htm;
try_files $uri $uri/ /oa/index.html; ## 重要!!!注意二级目录
}
location /oa/api/ { ## 后端项目 - 管理后台
proxy_pass http://localhost:48080/; ## 重要!!!设置为后端项目所在服务器的 IP
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
6、重启nginx 服务
service nginx restart
7、启动成功!
二级目录页面,点击浏览器刷新也能正常访问,发布成功。
一级页面,nginx 默认页面正常展示
总结:
几个关键的URL 不能错,不要多加/,可能会导致static页面无法加载,或刷新后页面发生不符合预期跳转。