关于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来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
随机推荐
- Map 概述
map定义:将键映射到值的对象.key必须唯一,但是value可以重复.当你添加相同key的值的时候,value会被覆盖. 与之前的collection有什么区别呢? A:Map 存储的是键值对形式的 ...
- solr之创建core(搜索核心,包括索引和数据)的方法
我的solrhome为D:\solrHome\solr step1:进入solrHome会看到collection1文件夹,创建该文件夹的副本,重命名为product 进入product文件夹,进入d ...
- DHT
DHT(Distributed Hash Table,分布式哈希表)类似Tracker的根据种子特征码返回种子信息的网络.DHT全称叫分布式哈希表(Distributed Hash Table),是一 ...
- 【Redis】Redis-benchmark测试Redis性能
Redis-benchmark是官方自带的Redis性能测试工具,可以有效的测试Redis服务的性能. 使用说明如下: Usage: redis-benchmark [-h <host>] ...
- kbmmw 的远程桌面功能
kbmmw 内置了远程桌面控制功能好几年了,好多同学居然不知道这特性,因为kbmmw 默认没有开放这个特性, 今天我就给大家说一下如何开放这个功能,并用官方自带例子说一下使用方法. 首先要开放这个特性 ...
- 爬取数据时解析url时一直报错Caused by: java.net.URISyntaxException: Illegal character in query at index 823替换了所有空格和特殊字符还是无效
近日在用HttpClient访问抓取汇率时,为了省力,直接采用 String url = "http://api.liqwei.com/currency/?exchange=usd|cny& ...
- RNN文章总结
1.RNN 基本结构类型 2. RNN 3.零基础入门深度学习(5) - 循环神经网络 4.
- Source Routing
Source routing Followed by book_Principles and Practices of Interconnection Networks, p204. With sou ...
- IntellJ IDEA2017 springboot2.0.2 替代@SpringBootApplication方式
如果不想用@SpringBootApplication,那么可以用@EnableAutoConfiguration 和@ComponentScan替代@SpringBootApplication 详情 ...
- form表单序列化为json格式数据
在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串. 首先,是扩展的jquery序列化插件,依赖jquery.经测试,这段代码可 ...