北京网站建设一条龙,做网站域名和空间费,电子设计大赛网站开发,版面设计的原理http://www.your-server.com/ 这是一级目录#xff0c;由于项目多#xff0c;一般会通过二级域名http://oa.your-server.com/或二级目录http://www.your-server.com/oa来发布#xff0c;本篇记录一下二级目录发布。先看效果 1、router/index.js配置base export default new …·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)目录, 相对于 outputDirassetsDir: static,} 3、vue 项目打包
npm run build:prod
4、将生成目录dist打包为dist.zip上传到服务器目录/home/并完成解压 [roothcss-ecs home]# ll dist
total 4
drwxr-xr-x 5 root root 4096 Apr 6 21:51 oa
[roothcss-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
[roothcss-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/; ## 重要设置为后端项目所在服务器的 IPproxy_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页面无法加载或刷新后页面发生不符合预期跳转。
