关于nginx部署vue项目的两个问题
首先我使用的是后端接口+前端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项目的两个问题的更多相关文章
- nginx部署vue项目
nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...
- CentOS7 安装nginx部署vue项目
简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起. 在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...
- Docker镜像+nginx 部署 vue 项目
一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西 ...
- Centos7 使用nginx部署vue项目
一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0 ...
- nginx部署vue项目 解决方案
给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”.比如访问:http://localhost:8081/user/login,访问即报404错误,这 ...
- Centos+Nginx部署Vue项目
1.项目打包生成dist文件夹 在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到centos7 使用scp命令或者用远程连接工具将 ...
- Nginx部署vue项目的配置
. 官网下载 http://nginx.org/en/download.html 选择stable version nginx/Windows-1.14.1 pgp . 解压 然后配置环境变量,如果环 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
随机推荐
- EasyUI DataGrid 获得分页信息
var b = $('#SBDiv_1_DateGrid').datagrid('options'); console.info(b); 具体需要哪些字段,可以通过火狐debug,然后自己找需要的信息 ...
- svn 修改原来包名的方法和会报的错误
SVN E200009 which is not part of the commit; both sides of the move must be committed together 在svn上 ...
- [C#.Net]C#连接Oracle数据库的方法
首先介绍下开发环境:WIn10 64bit+Visual Studio 2015+Oracle10ClientWin32(只是客户端,如果安装整个数据库也是可以的) 目前了解C#中连接Oracle数据 ...
- 日志审计系统、事件日志审计、syslog审计
日志审计系统.事件日志审计.syslog审计 任何IT机构中的Windows机器每天都会生成巨量日志数据.这些日志包含可帮助您的有用信息: · 获取位于各个Windows事件日志严重性级别的所有网络活 ...
- 2019.02.09 bzoj2440: [中山市选2011]完全平方数(二分答案+容斥原理)
传送门 题意简述:qqq次询问(q≤500)(q\le500)(q≤500),每次问第kkk个不被除111以外的完全平方数整除的数是多少(k≤1e9)(k\le1e9)(k≤1e9). 思路:考虑二分 ...
- 2018.06.27Dual Core CPU(最小割)
Dual Core CPU Time Limit: 15000MS Memory Limit: 131072K Total Submissions: 26136 Accepted: 11270 Cas ...
- vue 开发系列(一) vue 开发环境搭建
概要 目前前端开发技术越来越像后台开发了,有一站式的解决方案. 1.JS包的依赖管理像MAVEN. 2.JS代码编译打包. 3.组件式的开发. vue 是一个前端的一站式的前端解决方案,从项目的初始化 ...
- linux学习--查看操作系统版本及cpu及内存信息
查看版本当前操作系统内核信息 uname -a 查看当前操作系统版本信息 cat /proc/version 查看物理cpu个数: cat /proc/cpuinfo| grep "phy ...
- netfilter框架和iptables
转载自:http://blog.chinaunix.net/uid-23069658-id-3160506.html http://blog.chinaunix.net/uid-23069658-id ...
- C# 中的委托(Delegate)
委托(Delegate) 是存有对某个方法的引用的一种引用类型变量.引用可在运行时被改变. 委托(Delegate)特别用于实现事件和回调方法.所有的委托(Delegate)都派生自 System.D ...