首先我使用的是后端接口+前端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_pass http://127.0.0.1:3000/;
}
}

然后还遇到一个问题:我在vue中使用的是vue-router跳转的,如果跳到二级菜单,刷新页面的话会出现404页面。这是因为在vue中使用的是js渲染的虚拟目录,而在nginx配置中并没有实际的资源,所有会出现404。直接上配置:

server {
listen 80;
server_name www.liangyp.xyz; location / {
root /var/www/VueApp;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
} location /apis {
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000/;
}
}

加上这些后就可以正常访问啦。

关于nginx部署vue项目的两个问题的更多相关文章

  1. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  2. CentOS7 安装nginx部署vue项目

    简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起.   在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...

  3. Docker镜像+nginx 部署 vue 项目

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西 ...

  4. Centos7 使用nginx部署vue项目

    一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0 ...

  5. nginx部署vue项目 解决方案

    给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”.比如访问:http://localhost:8081/user/login,访问即报404错误,这 ...

  6. Centos+Nginx部署Vue项目

    1.项目打包生成dist文件夹 在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到centos7 使用scp命令或者用远程连接工具将 ...

  7. Nginx部署vue项目的配置

    . 官网下载 http://nginx.org/en/download.html 选择stable version nginx/Windows-1.14.1 pgp . 解压 然后配置环境变量,如果环 ...

  8. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  9. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

随机推荐

  1. javascript对象的属性,方法,prototype作用范围分析.

    用了javascript这么久由于没有系统学习过基础,总是拿来主义. 所以对一些基础知识还是搞不清楚很混乱. 今天自己做个小例子,希望彻底能搞清楚. 注释中对象只例子的对象本身,原型只原型继承对象的新 ...

  2. linux中命令突然不能用

    先用:echo $PATH 发现path丢失:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin 于是用临时环境变量 export ...

  3. clion配置c/c++环境

    打开这个界面  点击添加Cygwin选择下载的Cygwin在进行下面的配置 去网站https://www.cygwin.com/选择路径即可(这里只写了配置过程中的关键步骤并且附上IDE的链接直接安装 ...

  4. jsp里面不能使用${pageContext.request.contextPath}解决方案

    1.在jsp中使用${pageContext.request.contextPath}获取相对路径,可是最后路径变为:http://localhost:8080/oneself/$%7BpageCon ...

  5. 2018.12.17 bzoj3667: Rabin-Miller算法(Pollard-rho)

    传送门 Pollard−rhoPollard-rhoPollard−rho板题. 题意简述:给出几个数,让你判断是不是质数,如果不是质数就求出其最大质因子,数的大小为1e181e181e18以内. 先 ...

  6. 关于Cell中的各种值的类型判断

    switch (cell.getCellType()){ case Cell.CELL_TYPE_NUMERIC: //数字 cellValue = stringDateProcess(cell); ...

  7. TCP/IP协议(5):传输层之TCP

    一.TCP报文 上图为TCP报文的格式,可以看到TCP头部占20个字节,其中红色圆圈中每一项占一位,表示TCP报文的类型,置1表示该项有效. SYN表示建立连接.    FIN表示关闭连接.    A ...

  8. Ubuntu 16.04 搭建LAMP服务器环境流程

    http://www.linuxidc.com/Linux/2016-09/135629.htm [安装mysql时 只需安装 mysql-server无需安装mysql-client] mysql ...

  9. s4-7 生成树协议

    Spanning Tree :为了可靠,采用冗余结构:但是透明网桥 会产生无休止循环的问题 冗余交换拓扑可能带来的问题  广播风暴  多帧传送  MAC地址库不稳定 生成树协议  STP:sp ...

  10. 详细解读 :java.sql.SQLException: Connection is read-only. Queries leading to data modification are not allowed,Java报错之Connection is read-only.

    问题分析: 实际开发项目中,进行insert的时候,产生这个问题是Spring框架的一个安全权限保护方法,对于方法调用的事物保护,一般配置如下: <!-- 事务管理 属性 --> < ...