我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

部署vue前端项目  一.下载项目到本地   https://github.com/macrozheng/mall-admin-web 二.npm install 三.修改api配置,改为你接下来要部署的后台项目的ip:port 四.编译打包 五.部署 蒋dist文件夹压缩成 dist.tar.gz 安装远程复制工具 yum -y install lrzsz 进入nginx文件夹:cd mydata/nginx/ 执行拷贝命令将本地dist文件拷贝到 nginx文件夹下:rz 解压:tar -z

VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 Allow CORS: Access-Control-Allow-Origin 解决方式2:服务端配置跨域访问 也可以在服务端配置解决这个问题,这个要找后台协商. 很多开源的第三方库都做了处理,你在哪里调用都不会出现跨域问题. 解决方式3:前端项目配置本地代理 经过测试,这种方式通用性很强,不需要

1.前端框架一般依赖node.js,我们首先要安装node.js.请参考: http://www.cnblogs.com/wuac/p/6381819.html to:安装好node.js后npm也安装OK了 , 自己在设置一下环境变量路径配置 自行百度.. 查看node版本命令:node -v 查看npm版本命令: npm -v 2.npm 的源都在国外的地址,安装起来特别慢,这里利用淘宝的镜像服务器. 安装命令为:npm install -g cnpm --registry=https://

最近自己和朋友做了一个小的项目,用的是vue3.x版本,本地dev运行的时候接口什么的都是正常的,但是build打包后本地使用anywhere启动一个本地服务的时候发现接口报错405状态,发布到线上接口直接报错404. 很奇怪,因为本地都是好的没有道理线上的不行. 我第一时间想到的很大可能是设置代理的部分出了问题. 首先我排查了本地的代码,本地代码是ok的,然后和之前2.x版本的代理配置比对,也没有发现问题所在. 然后在谷歌上面找到了一个原因: vue的代理配置只是在dev的时候启动,打包的时候

前端是vue,后端是nodejs 前端打包成dist目录,后端接口是localhost:4000/api server { listen 80; #listen [::]:80; server_name yourdomain; index index.html; root /home/wwwroot/yourfolder/dist; # vue router开启了history 模式,nginx匹配不到的路由,就返回index.html,这样不报404 location / { try_file

一.前言 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口 假设后端的文档分成了以下几个模块 1.发现模块 2.个人信息模块 3.商品模块 4.评论模块 ...... 一般来说,网站的首页都是复杂的,会用到很多其他页面也会用到api,所以接口统一管理可以做到api的复用 二.接口管理 1.在src目录下创建api文件夹 2.按照后台文档划分模块 find.js info.js goods.js comment.js 3.创建http.js 引入axios 配置ax

项目打包,默认是打包在根目录下面的.当然我们可以通过设置,打包到任意子目录中去. 但是,当项目中引入资源的,比如:引入图片资源.js资源.或者字体图标之类的.那么可能在这个中间又会踩坑. 1.在vue文件引入图片 例如,我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文件中用下面的代码来使用这张图片. <img src="static/image/lyf.jpg" alt=""> 注意,最前面不要加 / ,如果是这

在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 本文使用vue-cli生成的项目举例. 第一步.在src目录下新建一个文件夹http,在http目录下建文件夹moudules,后台提供的所有接口都在这里定义. 第二步.在moudules目录下划分模块新建js文件,比如: a.会员中心模块: member.js b.登录注册模块: login.js c.合伙人模块: partner.js 目录大概是这个样子:  第三步,需要引入axios做相应的配置

在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法: word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; overflow: hidden; 1.安装依赖这个依赖:npm i -S optimize-css-assets-webpack-plugin 2.并且注

配置多个ip 简单的说,打开httpd.conf 在最后加入如下内容: <VirtualHost 127.0.0.2:80> DocumentRoot d:/AppServ/www2 ServerName 127.0.0.2:80 </VirtualHost> <Directory "d:/AppServ/www2"> Options Indexes FollowSymLinks Multiviews AllowOverride All Order

server { listen 80; server_name test.hehe.com; location /riskcontrol { root /data; try_files $uri $uri/ /riskcontrol/index.html; access_log /app/logs/riskcontrol.log; } location /buyloan { root /data; try_files $uri $uri/ /buyloan/index.html; access_

本地(ubuntu19.04)安装docker: sudo apt install docker.io SSH连接服务器: 安装Docker: yum update yum -y install docker-io 启动docker service docker start 开机自启 systemctl enable docker.service 启动自带helloworld测试 docker run hello-world 关闭防火墙: systemctl disable firewalld

nginx代理部署Vue与React项目 一,介绍与需求 1.1,介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日. Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少

使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'history', 有更好的体验. 目的: 想将项目打包后发布到apache的www下的vue子目录 先讲结论: 需要修改router/index.js中new Router 配置,加一个base: '/vue/', 它指定应用的基路径,该应用是服务于localhost/vue路径下,所以必须加base

我们在本地写好代码,然后打包上线前需要修改相关的配置文件,否则项目无法正常运行,主要是路径不对,找不到相关文件. 1.修改config > index.js(如下图) 2.在build > utils.js里如下图的地方添加publicPath: "../../"即可. 修改好以上两点,就可以运行部署你打包好的项目了.

Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx) 一丶集群和Nginx反向代理 集群的概念: 集群的特性: Nginx的反向代理 # 反向代理 # 通过访问Nginx的web服务,由Nginx 对 '有效的请求' 进行一个请求转发,请求到真正的web服务后台数据.返回给用户. # 正向代理 # vpn . 访问外国的网站,需要把你的请求进行伪装/代理进行转发 ### 如下图~~

在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://local

一.环境.工具 jdk1.8 maven spring-boot idea VSVode vue 百度网盘(vue+springboot+nginx源码): 链接:https://pan.baidu.com/s/1m3ciEUmUsjqoQBnIJBR7Zw 提取码:6gi9 二.搭建后台spring-boot框架 步骤: 1.new- project选择Spring Initializr  next 2.创建项目文件结构以及jdk版本 3.选择项目需要的依赖 next然后finish 4.创建

经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker-compose 部署Vue+SpringBoot 前后端分离项目 整体项目配置结构,这里在不影响原来项目的结构,因此将所有配置文件都提出来存放到docker文件夹内了,但注意docker-compose文件须放到项目总的根目录下哦! 1.新增后端所需配置文件api-Dockerfile # 指定基