现象: 在浏览器中直接访问www.test.com/api1/login会404.但如果你先访问www.test.com后再点“登录" 跳转到www.test.com/api1/login是正常显示.f5刷新又会出现 404了 这是web单页面开发模式造成的.现在主流的前端框架基本都是单页面的.如:react.vue等. 单页面简单来说就是访问所有资源路径.其实页面内容只有一个(一般是index.html).这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件(可以理解为页面片

nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建. 打包vue项目 npm run build 通过上面命令后打包好的静态资源将输出到dist目录中.如图所示  安装nginx 到nginx官方下载系统相关的nginx版本安装 windows环境 下载相应的windows版本解压,解压后如图所示 启动命令: cd D:\ProgramFiles

很多项目的前端都使用vue编写的,在项目上线部署的时候,有些项目要求把前端页面和后台服务部署在不同的服务器,这就要求使用nginx代理,本文就来讲讲vue项目怎么使用nginx代理. 项目github地址:https://github.com/Little-Orange7/cmms-vue 一．本地开发配置 Vue项目本地开发,框架自带了一个代理的工具,可以利用这个工具来模拟代理配置: 说明: '/api': {// 请求接口中匹配到/api的接口,都统一走这个代理 这个是匹配请求接口的上下文路

转自:linux nginx配置新项目加域名 找到nginx的配置文件 nginx/nginx.conf 第一种方,法直接在nginx.com里面配置 user www www; worker_processes auto; error_log /home/wwwlogs/nginx_error.log crit; pid /usr/local/nginx/logs/nginx.pid; #Specifies the value for maximum file descriptors that

一. Nginx 配置 proxy_pass 后 返回404问题 故障解决和定位 1.1. 问题 在一次生产涉及多次转发的配置中, 需求是下面的图: 在配置好了 proxy_pass 之后,请求 www.djx.com 直接返回 404,没有什么其他的异常. 但是我们直接请求后端 www.baidu.com 是正常响应的.这就很怪异的. 看日志请求也是转发到了 www.baidu.com 的.但是请求响应就是404. 1.2. 寻找问题原因 我们的默认的 Nginx的 proxy_set_hea

目标 babel 转换ES6 语法 postCss 增强css功能,如自动增加前缀 vue-loader 解析vue 文件 实现基本的vue项目开发环境,打包等 Babel 由于浏览器对es6语法兼容性问题,我们需要用babel 对新语法以及新的api 做代码转换成,也可以理解成Babel是一个工具链,主要帮我们做如下事情 转换语法 Polyfill实现目标环境中通用的功能(通过@ babel / polyfill) 源代码转换(codemods) 安装核心插件 npm install --sa

参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理 本文使用vue-cli生成的项目举例 使用接口管理之前 在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中 比如: xxx.vue <template> <div id="area

1.首先看了nginx报错日志 报 signal process started signal process started表示还有 产生原因 1.可能你的nginx.conf 内容配置的有问题. 2../nginx -r reload 启动命令默认加载的nginx.conf 的路径不对. 之前还以为本地安装的nignx端口号冲突了呢,结果不是 是配置的问题; 假如mac安装的nignx和集成环境mamp端口号重复了, 可以修改配置文件nginx.conf中端口号来解决 也可以停掉你不需要的那

首先我使用的是后端接口+前端vue的形式,这样就涉及到跨域的问题.我是这样配置的: server { listen 80; server_name www.liangyp.xyz;//访问网址 location / { root /var/www/VueApp; index index.html index.htm; } //这里是配置的如果访问apis则是转到后端接口,这样就避免了跨域 location /apis { rewrite ^/apis/(.*)$ /$1 break; proxy

一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西. 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. 二.获取nginx 镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像. 在终端输入: docker pull nginx 即可以获取到ngin

1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: nginx配置反向代理,解决跨域问题 配置如下 server {       listen     80;  //监听80端口       server_name www.im.com;  // 配置域名        include /etc/nginx/default.d/*.conf;        

目前前端项目 可分两种: 多页面应用,单页面应用. 单页面应用 入口是一个html文件,页面路由由js控制,动态往html页面插入DOM. 多页面应用 是由多个html文件组成,浏览器访问的是对应服务器的html文件. 多页面应用 目录结构 . ├── README.md ├── html ├── index.html └── project.html └── img └── bg.jpg 上面这种情况 index.html 不在根目录下,nginx.conf 需要配置更加准确. nginx配置

简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起.   在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法,**以下命令均需root权限执行**:   首先安装必要的库(nginx 中gzip模块需要 zlib 库,rewrite模块需要 pcre 库,ssl 功能需要openssl库).选定**/usr/local**为安装目录,以下具体版本号根据实际改变. 安装:1.安装gcc gcc-c++(如新

一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm #安装 yum install -y nginx #启动服务 systemctl start nginx.service #关闭服务 systemctl stop nginx.service #开机自启 systemctl enable nginx.servi

说明 使用 Nginx 的 upstream 对 Vue 项目做负载均衡时,代理的地址无法访问目标地址,且页面报错: Invalid Host header(无效主机头) 分析 检查 Nginx 的 nginx.conf 配置,如下: upstream sail{ server 127.0.0.1:8080; } server { listen 8081; server_name localhost; location / { root html; index index.html index.

找到nginx的配置文件 nginx/nginx.conf 第一种方,法直接在nginx.com里面配置 user www www; worker_processes auto; error_log /home/wwwlogs/nginx_error.log crit; pid /usr/local/nginx/logs/nginx.pid; #Specifies the value for maximum file descriptors that can be opened by this

小白第一次使用nginx,本地环境Ubuntu 16.04.6 1.安装Nginx sudo apt install nginx 2.生成证书 (参考来源:https://segmentfault.com/a/1190000007990972) 1)使用openssl生成密钥privkey.pem: openssl genrsa -out privkey.key / 证书信息可以随便填或者留空,只有Common Name要根据你的域名填写.2) 使用密钥生成证书server.pem: opens

题记:学vue有一段时间了,终于今天下定决心每日书写一篇学习笔记.1.访问node.js官网:https://nodejs.org/en/ 下载对应安装包.2.安装完成,在终端输入 : node -v 如果返回版本号,代表安装成功.建议安装之前给目录权限,至于怎么给目录权限,这里不做说明,网上有很多资料.3.安装淘宝镜像至于为何要安装淘宝镜像,因为有帐幕阻挡我们访问npm 的境外网站:好奇心强的朋友可以进行尝试,运气差的要很久.很久.有可能一晚上时间,别问我怎么知道的.废话少说,在终端输入: n

Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api...废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 说明:此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单

. 官网下载 http://nginx.org/en/download.html 选择stable version nginx/Windows-1.14.1 pgp . 解压 然后配置环境变量,如果环境变量配置无效,启动时请在nginx文件夹中打开命令窗口 . 打开一个命令窗口 输入start nginx启动服务(停止服务 nginx -s stop) .打开文件中的conf=>nginx.conf更改配置,更改监听的端口号 . 注释掉图中红点处 . 在conf文件夹下新建一个conf.d文件夹