Vue 学习笔记 - 若依前后端分离项目发布到子目录
配置文件
发布日期:2021-06-30 14:53:51
浏览次数:3
分类:技术文章
本文共 2900 字,大约阅读时间需要 9 分钟。
Vue 学习笔记 - 若依前后端分离项目发布到子目录
Vue 默认的发布位置是在web服务的根目录下,比如地址是:
但很多时候,我们的web服务下有多个网站,是通过虚拟路径来区分的,比如: 这就遇到一问题,如何将VUE项目发布到二级目录。 以若依系统为例,需要修改vue.config.js
中的几个配置。 配置文件vue.config.js
vue.config.js
是一个可选的配置文件,此配置文件在vue项目的根目录下,如果你的项目里没有可以自己创建。
若依原版
module.exports = { // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。 publicPath: process.env.NODE_ENV === "production" ? "/" : "/", // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist) outputDir: 'dist', // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下) assetsDir: 'static',}
修改后
我的项目访问地址是:
module.exports = { // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。 publicPath: process.env.NODE_ENV === "production" ? "/ruoyivue/" : "/", // 打包出来的文件夹就叫这个名字,直接复制到web服务的根目录下就行了。 outputDir: 'ruoyivue', // 资源文件在 ruoyivue/static 下。 assetsDir: 'static', // 根据自己需要,首页文件也改了一下 indexPath: 'ruoyi.html'}
打包
改完配置后:
# 安装依赖npm install# 构建生产环境npm run build:prod
打包成功后多出一个文件夹ruoyivue
发布
把文件夹 ruoyivue
复制到web服务的根目录下。
Nginx 配置
按官方提供的这个配置稍微改改就行。
- web服务位置的根目录:
D:\\nginx\\html
- 首页的文件名:
ruoyi.html
worker_processes 1;events { worker_connections 1024;}http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { # web服务根目录 root D:\\nginx\\html; # index.html 改为 ruoyi.html try_files $uri $uri/ /ruoyi.html; # 加了个 ruoyi.html 后面的要不要无所谓 index ruoyi.html index.html index.htm; } location /prod-api/{ 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; # 后端的真实接口 proxy_pass http://localhost:8080/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }}
若依前端访问后台接口的逻辑。
-
首先明确一下:(按照官方默认的配置,端口不同)
前端页面在: 后台接口在: -
例如:登录时的图形验证码接口
真实后台服务: 前端访问地址:
这时如果前端直接访问后台的 肯定是不存在这个接口的。
所以请求到了后台由nginx进行了转发。通过两步实现
-
前端vue项目在访问后台接口时,统一在接口前加上
/prod-api
基础路径。(默认已经在RuoYi-Vue\ruoyi-ui\.env.production
文件中配置好了。这个可以根据自己需要修改。) -
正如我们前面的操作,在 Nginx 中配置 路径下的请求转发到 。搞定。
疑问?那开发环境下没配置nginx为啥也能访问呢?
因为默认 vue.config.js
中的 devServer.proxy
选项已经做了80
到 8080
的转发,所以开发时能直接跑。
devServer.proxy
这个名字也比较直观了吧。 // webpack-dev-server 相关配置 devServer: { host: '0.0.0.0', port: port, // 这个变量是 80,在文件中能找到。 open: true, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://localhost:8080/`, changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } } }
参考资料
转载地址:https://jerryjin.blog.csdn.net/article/details/113936166 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年04月07日 20时10分03秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
基于java的ssm框架就业信息管理系统的设计
2019-04-30
如何用同期群分析模型提升留存?(Tableau实战)
2019-04-30
2021最新 上海互联网公司排名
2019-04-30
Oracle字符串分隔符替换(替换奇数个或偶数个)
2019-04-30
Oracle 利用 UTL_SMTP 包发送邮件
2019-04-30
Oracle 的循环中的异常捕捉和处理
2019-04-30
Oracle的pfile和spfile的一点理解和笔记
2019-04-30
WebService的简单案例记录(Java)
2019-04-30
java实现稀疏数组及将稀疏数组存入硬盘中
2019-04-30
2021-05-18
2019-04-30
libuv实现ping包发送和接收
2019-04-30
基础架构系列篇-系统centos7安装docker+COMPOSE
2019-04-30
基础架构系列篇-NGINX部署VUE
2019-04-30
基础架构系列篇-系统centos7安装kafka
2019-04-30
软件质量的8个特性
2019-04-30
应届渣渣前端的艰难求职之路
2019-04-30
2021年不可错过的17种JS优化技巧(一)
2019-04-30
在 Vue 中用 Axios 异步请求API
2019-04-30
MySQL进阶查询(SELECT 语句高级用法)
2019-04-30
Mysql 之主从复制
2019-04-30