vue反向代理天地图地址（vue后台返回菜单路劲前端怎么处理）

本文目录

• vue后台返回菜单路劲前端怎么处理
• 通俗易懂讲解vue.config.js的配置参数
• Vue-element-admin项目使用Nginx初体验
• element-admin mock改成真实请求 vue-cli3 配置代理
• django+vue前后端分离项目部署
• 在nginx+vue.js中如何实现前后端分离
• 问题解决1：nginx反向代理丢失js、css问题

vue后台返回菜单路劲前端怎么处理

1、首先设置前端反向代理，项目中根目录下env.developmen设置服务端访问路径，项目中根目录下vue.config.js设置。
2、其次接口请求地址，项目中根目录下src/api/user.js添加相应接口。
3、最后请求头设置，后台接口请求需要前端每次请求时，在请求头中添加token、ip等相关数据，项目中根目录下src/utils/request.js，用户登录后，需要存储登录后，后端返回的等相关信息。

通俗易懂讲解vue.config.js的配置参数

贴上 官网
vue-cli3 创建的时候并不会自动创建vue.config.js，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js
再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vue.config.js 去修改默认的webpack。注意，只能叫vue.config.js。

publicPath （从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath）
***隐藏网址***

***隐藏网址***

这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ，你可以使用一个条件式的值：

通常开发环境，本地运行都会直接部署在根路径上，publicPath设置为’/’，访问地址是你的IP地址。如下是设置成’/app’的效果：

从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。’/’就行。

结论： publicPath配置成’/aaa/bbb/ccc’， 则需在相应的服务器路径中新建aaa》bbb》ccc的文件夹，然后将打包后的文件放进去，就ok啦。

项目中，我会在.env.production文件中设置一个变量VUE_APP_BASE_URL ，项目打包后告诉相关人员 nginx 路由前缀是什么即可

outputDir

assetsDir

indexPath

filenameHashing

直观效果：当运行npm run build时，
打包后的文件后面都会带一个8位的hash值，那啥是个hash值？

在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法，js文件如果有内容更新，hash就会更新，浏览器请求路径变化所以更新缓存，如果js内容不变，hash不变，直接用缓存。（这段话是从别的文章里面参考的）。
将filenameHashing这个值设置为false试试，就不会带那个后缀hash值。

pages

lintOnSave

runtimeCompiler

transpileDependencies

productionSourceMap

crossorigin （不理解）

integrity

configureWebpack

chainWebpack

Css相关配置

devServer
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
补充知识
所谓的跨域就是不同源，不满足协议、域名、端口都相同的约定
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域
补充知识
反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。
修改config/index.js /vue.config.js文件（改完之后千万记得要重新 npm run dev）

host 将他的值修改为 0.0.0.0，代表可以访问本机所有的IP地址，让vue项目可通过localhost和IP同时访问。

port 设置端口号

open 是否在第一次编译时是自动打开浏览器

hot 开启为true，启动热重载，自动刷新页面

***隐藏网址***

inline

overlay

targe 代理的服务器，也就是api要访问的服务器。
changeOrigin 允许跨域， 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值
ws 是否代理websocket
pathRewrite 重写 url 的 path 部分

此文记录下来，方便自己遗忘的时候能够快速查阅，如有错误请指出。

参考链接：
***隐藏网址***
***隐藏网址***
***隐藏网址***

***隐藏网址***

Vue-element-admin项目使用Nginx初体验

nginx这个名词听了多年，好似是搞什么反向代理。很多人在用，我却没尝试过。因为不了解，所以误解。

开始还以为一定要用什么IIS，然后再代理什么的。用了两天才搞明白一点，nginx可以取代iis, 当然这是我初次的判断。开始用nginx缘于用vue-element-admin搞的一个项目要发布到生产环境，官方介绍说生产环境下的跨域建议用nginx解决。然后从昨天开始尝试，开始用起来很懵。

a. vue-element-admin用npm run build:prod打包到dist，路径为：D:/AppCode/StPlatform/dist

***隐藏网址***

***隐藏网址***

1. vue中不需要作什么特别的设置, 也贴一下截图吧

***隐藏网址***

一切才刚刚开始，以后得好好学习nginx了，神奇！

element-admin mock改成真实请求 vue-cli3 配置代理

之前使用 element-admin 模板 自带的有mock请求，想替换成后台真正的请求，发现一只请求的是本地的localhost ，按照按照文档上的做（我直接注释了after 这一行，并修改了 proxy中target的代理地址）发现没有效果，再后来多方查询发现自己理解错了，移除分两个部分，一个是 移除mock，另外一个是修改mock地址为自己的

正确做法：1、不使用mock 也不使用代理 ：将 proxy与after都移除，请求的公共ip地址可以，新建config文件，在里面配置后，引用，这个看个人习惯 ，重要的是要将 proxy与after都移除
ps：貌似可以再vue.confing.js - configureWebpack中配置，还没弄懂怎么配，有知道的告诉一下
2、不使用mock，但是要反向代理：移除 after 并将 proxy 中的target 修改为代理地址，并且在element-admin封装的request请求中，将baseUrl注释掉

django+vue前后端分离项目部署

后端用的drf，使用的是uwsgi+nginx

进入服务器项目文件目录下，我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件，配置如下：

测试效果命令：

如果访问：xxx.xxx.xxx.xx:8000 成功， 则uwsgi.ini配置成功

我的nginx.conf所在位置是“/etc/nginx/nginx.conf”
配置文件如下：

1、第一行

主要就是给nginx加权限，vue部署后使用history路由时会去掉地址后面的‘#’号，打包部署后不加权限会有bug。
2、如配置所示，有两个Server，分别部署了前端服务，和后端服务，值得注意的是两个Server用的是同一个服务器，监听的端口不同。
3、vue部署需要注意的是反向代理地址：

以及后面的端口问题

4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgi.ini中配的相同，否则监听不到

5、后端跨域问题。如果遇到跨域需要自己网上找配置，我的没遇到，可能是因为我在django的settings中配置了跨域。
6、django-suit后台管理样式崩了，需要改，但是api可以正常访问，这个有空再说
7、我开始后台监听的是8008端口，vue前端监听的是80端口，这样前端显示好看。然而问题出现了，虽然后台api可以正常访问，vue的本地开发环境也能正常运行且文字、图片资源均显示正常，但是前端vue打包线上部署后，文字信息显示正常，图片信息缺失8008端口，导致显示不出来。为图方便我选择了前端监听8008端口，后端监听80，部署后显示正常。原因不太清楚///////有空再说吧。
8、不要问我为啥都前后端分离了还部署到一个服务器上？穷，而且只是测试，没必要
9、此文仅适合入门

***隐藏网址***

在环境中进入项目目录，需要收集css样式，在终端输入命令：

接下来你就回发现static文件中包含了css文件，此时再打开网站，样式显示正常

uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件，里面只有一行内容是 uWSGI 的主进程的进程号。

关于uwsgi,进入同届目录下

教训

获取不到环境，那就指定环境

另外：记得重启uwsgi，重启Nginx，实在不行就先把监听的端口kill掉再重启
暴力删端口：fuser -k 80/tcp

netstat -aptn命令行，查看所有开启的端口号

netstat -ntlp | grep 80 查看具体的端口是否使用
ps -ef | grep uwsgi 查看是否有uwsgi端口存在

在nginx+vue.js中如何实现前后端分离

这篇文章主要介绍了nginx+vue.js实现前后端分离的示例代码，现在分享给大家，也给大家做个参考。
1.nginx 是一个高性能的HTTP和反向代理服务器，常用于分布式服务器管理.
它常用于做负载均衡(通过调用多台服务器达到此目的)
静态资源输出更快，可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因)
适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因)
占用内存少,秒启,能快速切换结点,防止宕机
***隐藏网址***
3.vue.js是一款前端模板渲染引擎,类似于后端的jsp,beetl等模板引擎.当然结合node环境也可作为后端渲染用.(官网已支持)
说了上述几点,让我们来回答几个为什么?
1.实现前后端分离的好处是什么?主要应用场景在哪?
2.为什么有了后端模板引擎,为什么还要用前端的模板引擎?他们的优势和劣势?
3.实现前后端分离需要怎么改？
长长的分割线思考后???????????
1.首先是发展的眼光看问题，以前的项目大多呈现的是PC端项目,且场景简单,固定.请求大多是有状态的.而现在我们常常是移动端项目较多,同一款app大多是原生和内嵌页面相结合的方式.并且现在的项目场景更多元化,这导致一个功能模块很可能是好几个项目的请求共同作用的结果.
2.如果还按照以前的做法,第一个问题是我只能用jsonp去解决调多个跨域请求的问题,实现起来代码太过冗余。对于同一功能,很有可能app端和PC端就有两套不同的写法。并且带宽是个很贵的东西,客户端总是去服务器端一起静态资源的请求,会导致速度慢。动静分离可以实现静态资源和动态资源分开获取,并且服务器也能动静分离,有效解决带宽问题。
3.后端开发人员对于css,js的掌握可能不如前端熟练,比如利用jsp填充数据时,往往需要后端开发人员去调样式和写js,这样会造成开发效率低下。
4.采用前端模板渲染可以释放服务器端的一部分压力,并且前端模板引擎支持的功能比后端丰富.比如用vue可以自定义组件,校验方式,深入式渐变等,这比后端模板引擎功能要更加丰富.
4.我们的解决方案如下
1.传统的交互方式:
客户端发起请求,服务器端响应,经过一系列操作生成动态数据,将动态数据交由后端模板引擎,经过渲染后,传递给前端.
2.改良的交互方式
客户端发起请求,nginx拦截,若是静态资源,则交由文件服务器直接压缩后发送至前端.若是动态资源请求,则经过动态资源服务器生成动态数据,以json格式返回至前端,交由vue.js渲染处理后进行展示.
5.vue.js 2.x版的重点功能讲解
1.怎样和html结构进行绑定,怎样和样式进行动态绑定,常用的监听事件有哪些
1.基本的渲染
//html结构
《p id="app"》
{{ message }}
《/p》
//js模块
var app = new Vue({
//会检索绑定的id 如果是class 则是.class即可绑定
el: ’#app’,
data: {
message: ’Hello Vue!’
}
})2.class与style绑定
《p class="static"
v-bind:class="{ active: isActive, ’text-danger’: hasError }"》
《/p》
data: {
isActive: true,
hasError: false
}
渲染结果为:《p class="static active"》《/p》3.常用的绑定事件
//输出html
《p v-html="rawHtml"》《/p》
//绑定id或class
《p v-bind:id="dynamicId"》《/p》
//绑定herf
《a v-bind:href="url" rel="external nofollow" 》《/a》
//绑定onclick
《a v-on:click="doSomething"》《/a》2.和服务器怎样进行通讯
在这里推荐大家使用axios进行和服务端的请求,然后将请求后的数据交由vue.js处理.
关于axios的使用例子链接地址
3.常见的流程控制语句 数据校验 自定义指令
//if 语句
《h1 v-if="ok"》Yes《/h1》
//for 循环语句
《ul id="example-1"》
《li v-for="item in items"》
{{ item.message }}
《/li》
***隐藏网址***
以下四点参考官网api,不再做介绍了
4.深入响应式怎样实现(在第一次页面初始化填值后，如果发生改变要修改怎么做)?
5.自定义组件应用及其使用Render创建Html结构
6.路由的使用
7.常见的修饰符
6.实战举例
1.nginx 配置静态资源
server {
listen 4000;
server_name www.test.com;
charset utf-8;
index /static/index.html;//配置首页
//这边可使用正则表达式,拦截动态数据的请求,从而解决跨域问题
location = /sellingJson.html {
***隐藏网址***
}
#配置Nginx动静分离，定义的静态页面直接从static读取。
location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
{
root /static/;
#expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以 节省带宽和缓解服务器的压力
expires 7d;
}
}2.后端请求返回json数据（以java为例）
@RequestMapping("/vueHelpSellingcar.html")
public void vueHelpSellingcar(HttpServletRequest request,HttpServletResponse response) {
//若干操作后,返回json数据
JSONObject resultJson = new JSONObject();
resultJson.put("carbrandList", carbrandList);
resultJson.put("provinceList", provinceList);
//进行序列化,返回值前端
try {
byte json =resultJson.toString().getBytes("utf-8");
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.getOutputStream().write(json);
} catch (Exception e) {
e.printStackTrace();
}
}3.前端调用vue示例
//html模块
《p v-if="carbrandList.length" class="char_contain"》
《p v-for="brand in carbrandList" id=" {{brand.brand_id}}"》{{brand.brand_name}}《/p》
《/p》
//js模块 页面加载后,自动去获取动态资源
let v={};
$(function() {
***隐藏网址***
.then(function(data){
//定义一个vue对象,方便模板渲染
v =Object.assign(v, new Vue({
el : ’.char_contain’, //绑定事件名
data : {
carbrandList : data.data.carbrandList, //数据流
}
}));
})
.catch(function(err){
console.log(err);
});
});上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
通过JS如何实现文字间歇循环滚动效果
详细讲解React中的refs（详细教程）
使用tween.js实现缓动补间动画算法

问题解决1：nginx反向代理丢失js、css问题

对于新版本的vue，需要新增vue.config.js，并添加如下配置，产生的效果是一样的

其实用 相对路径 来解决这个问题不是最好的方案，甚至 vue-cli4.x 之后，就不支持将 publicPath 设置为 ./ 了。
看了 公司的项目 及 Nuxt框架 的推荐，均是推荐使用绝对路径来设置 publicPath