关于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来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
随机推荐
- java 中jar的使用
????????????这里不会 需要学习
- jvm运行机制和volatile关键字详解
参考https://www.cnblogs.com/dolphin0520/p/3920373.html JVM启动流程 1.java虚拟机启动的命令是通过java +xxx(类名,这个类中要有mai ...
- 【Redis】Redis cluster集群搭建
Redis集群基本介绍 Redis 集群是一个可以在多个 Redis 节点之间进行数据共享的设施installation. Redis 集群不支持那些需要同时处理多个键的 Redis 命令, 因为执行 ...
- springMVC学习 四 请求的中文乱码解决
在使用SpringMVC时,同样有前端向后端发送请求,请求参数中有中文,需要解决中文乱码问题,在Spring中也是向java web中一样,通过一个过滤器来解决中文乱码. 这个过滤器在spring-w ...
- 关于SSH中tomcat下中文名称图片不显示的问题
最近做一个SSH框架的项目,用tomcat发布,需要上传图片到指定路径,然后再将图片显示在页面上.有一个问题:如果是英文名称的图片,就正常显示,可如果是中文的,它就是显示不出来,于是乎,在网上各种百度 ...
- python学习 day12 (3月18日)----(装饰器内置函数)
读时间函数: # import time # def func(): # start_time = time.time() # 代码运行之前的时间 # print('这是一个func函数') # ti ...
- extjs如何使用
刚学ExtJs 不知道如何使用.. 我的操作步骤如下: 1. 在项目中导入ExtJs 2. 创建了一个one.js 和 helloworld.html 3. one.js中的代码如下: Ext.Mes ...
- 防止网站被镜像,被iframe
1.防止网站被镜像 现象:他人域名访问到的是我的网站解析的ip地址我的 解决方法: http.ini里可以这样写 "RewriteCond Host: !^www.web\.cn$ Rewr ...
- vue中使用promise.all发送多个请求
1.创建两个promise,在promise中使用axios 2.调用Promise.all([p1,p2]).then(res=>{}).catch(err=>{})方法 代码如下: & ...
- 2.2 数据的图形描绘以及处理(QQplot,归一化)
QQplot 横坐标表示的是属性的其中一个测量值1,纵坐标表示另一个测量值2.散点是分位点.点的横纵坐标是这个测量值1和测量值2的分位点的取值. from scipy import stats fro ...