首页
友情链接
精美壁纸
给我留言
更多
关于我
Search
1
uniapp Click点击事件冲突解决
4,538 阅读
2
【插件】UNI APP 实现商米打印机功能支持T1,T2,V2机型
3,790 阅读
3
【测试可用】个人码免签支付系统源码/免签支付系统/微信支付平台
1,910 阅读
4
Java Validation参数校验注解使用
1,227 阅读
5
windows10下docker:给已存在的容器添加端口映射的方法
1,210 阅读
Java
Spring Boot
Spring Mvc
Java基础
进阶知识
前端
uniapp
小程序/公众号
JavaScript
HTML/CSS
Vue
PHP
开源软件
商城
营销工具
开发工具
视频/教程
Discuz主题/插件
typecho主题/插件
SEO杂谈
数据库
MongoDB
MySQL
Redis
单片机
概念说明
电路相关
Python
devops
docker
k8s
linux
职场杂谈
登录
/
注册
Search
标签搜索
python
mysql
人人商城
php
java
docker
typecho
插件
微擎
seo
spring boot
discuz
队列
uni-app
phpcms
教程视频
开源系统
源码
工具
css
哈根达斯
累计撰写
100
篇文章
累计收到
154
条评论
首页
栏目
Java
Spring Boot
Spring Mvc
Java基础
进阶知识
前端
uniapp
小程序/公众号
JavaScript
HTML/CSS
Vue
PHP
开源软件
商城
营销工具
开发工具
视频/教程
Discuz主题/插件
typecho主题/插件
SEO杂谈
数据库
MongoDB
MySQL
Redis
单片机
概念说明
电路相关
Python
devops
docker
k8s
linux
职场杂谈
页面
友情链接
精美壁纸
给我留言
关于我
搜索到
1
篇与
Vue
的结果
2022-11-16
Vue项目中设置路由为二级目录访问
在日常的开发工作中,我们经常遇需要把多个项目和服务部署在同一个域名下,然后使用nginx进行代理转发,例如:接口服务:a.com/api, 接口服务对应Java或PHP后台应用首页服务前端工程:a.com , 前端服务使用Vue编写后台服务前端工程:a.com/system,管理后台服务使用Vue编写,使用二级目录system因项目都需要部署在同一个域名,我们vue需要坐如何设置才能满足要求?了解vue-cli在vue的项目中,我们的项目编译和构建依赖于构建编译工具,所以我们需要对当前项目的cli版本或vite版本有所了解并到官网查看对应的API和配置说明:vue-cli 方式第一步,我们需要在vue.config.js文件中新增publicPath配置项,具体的参数说明如下:更多说明查看官网说明: vue-cli官网介绍 建议实际项目中使用条件式参数,或者在配置文件中设置值,参考代码如下:const vueConfig = { publicPath: process.env.NODE_ENV === 'production' ? '/system/' : '/', }第二步,修改路由配置,const createRouter = () => new Router({ mode: process.env.NODE_ENV === 'production' ? 'history' : 'hash',// 路由访问模式,可选参数,如果试history,则nginx需要做额外的配置 base: process.env.NODE_ENV === 'production' ? '/system/' : '/',// 访问基础路径,重要设置 routes: routerMap // 你的路由配置 }) const router = createRouter() export default router第三步修改nginx配置信息:当我们的路由使用history模式访问时,需对配置进行修改server { listen 80; server_name a.com; root /home/projectWork; #项目根目录 #后台服务 location /system { index index.html; try_files $uri $uri/ /system/index.html; #重要,vue项目解决刷新后404问题,配置项为重试查找别的文件,具体配置请自行百度"nginx try_files" alias /home/projectWork/system; } # 接口服务 location /api { proxy_pass http://127.0.0.1:8501; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_hide_header X-Powered-By; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; } }至此我们把system项目打包编译后的文件放到网站本目录下的system目录下,使用路径a.com/system 访问即可访问到我们的服务.
2022年11月16日
561 阅读
0 评论
0 点赞