首先我使用的是后端接口+前端vue的形式,这样就涉及到跨域的问题。我是这样配置的:

  1. server {
  2. listen 80;
  3. server_name www.liangyp.xyz;//访问网址
  4.  
  5. location / {
  6. root /var/www/VueApp;
  7. index index.html index.htm;
  8. }
  9. //这里是配置的如果访问apis则是转到后端接口,这样就避免了跨域
  10. location /apis {
  11. rewrite ^/apis/(.*)$ /$1 break;
  12. proxy_pass http://127.0.0.1:3000/;
  13. }
  14. }

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

  1. server {
  2. listen 80;
  3. server_name www.liangyp.xyz;
  4.  
  5. location / {
  6. root /var/www/VueApp;
  7. index index.html index.htm;
  8. try_files $uri $uri/ @router;
  9. }
  10. location @router {
  11. rewrite ^.*$ /index.html last;
  12. }
  13.  
  14. location /apis {
  15. rewrite ^/apis/(.*)$ /$1 break;
  16. proxy_pass http://127.0.0.1:3000/;
  17. }
  18. }

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

关于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. .net使用NPOI的XSSFWorkbook进行web开发中导出Excel

    之前也使用过NPOI导出excel,这次是因为在导出的excel里新增了几个列,正好超出了255的限制,所以又要改了. 今天主要出了4个问题: 1. Invalid column index (256 ...

  2. 【搜索】Shuffle'm Up

    运用第i个s12和第i+1个s12中,每个位置具有的确定的映射关系: pos = pos * 2 + 1 (pos < c) pos = pos * 2 - c * 2 (pos >= c ...

  3. NOIP模拟测试1(2017081501)

    好,今天是cgg第一次举行模拟测试,希望各位支持. 时间限制:2小时 题目链接: 题目一:水得都没名字了 题目二:车站 题目三:选数 不要觉得2小时太少,我的题目很良心,都很简单. 答案可以在模拟测试 ...

  4. Python之入门篇1

    一.安装python解释器 官网: https://www.python.org/downloads/windows/ 自行下载安装,添加环境变量 #测试安装是否成功 windows --> 运 ...

  5. 23.Xcode中常用的快捷键操作

    1.工程导航器:command+1 浏览文件夹,控制器,图片等 2.显示/隐藏导航器面板:Command+0 隐藏左边工具栏 3.显示/隐藏实用工具面板:Command+Option+0 使用工具面板 ...

  6. 如何查看Python内置模块的实现代码

    方法1:使用help(random) >>> import random >>> help(random) Help on module random: NAME ...

  7. 2019.01.19 codeforces343D.Water Tree(树剖+ODT)

    传送门 ODTODTODT板子题. 支持子树01覆盖,路径01覆盖,询问一个点的值. 思路:当然可以用树剖+线段树,不过树剖+ODTODTODT也可以很好的水过去. 注意修改路径时每次跳重链都要修改. ...

  8. 2018.10.27 洛谷P2915奶牛混合起来Mixed Up Cows(状压dp)

    传送门 状压dp入门题. 按照题意建一个图. 要求的就是合法的链的总数. 直接f[i][j]f[i][j]f[i][j]表示当前状态为jjj,下一位要跟iii连起来的方案数. 然后从没被选并且跟iii ...

  9. 吓死baobao了

    早上远程连接服务器连不上,后面重启服务器,显示进入紧急修复模式:welcome to emergency mode!after logging in ,type “journalctl -xb” to ...

  10. idea创建maven项目报错,Error initializing: org.codehaus.plexus.velocity.DefaultVelocityComponent@56da52a7 java.lang.NoClassDefFoundError: org/apache/commons/lang/StringUtils

    学着使用idea,想创建个maven项目,但是出师不利,立马报错,贼尴尬,错误信息如下: D:\Develop\JDK\bin\java.exe -Dmaven.multiModuleProjectD ...