vue项目 使用nginx代理
nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建。
打包vue项目
npm run build
通过上面命令后打包好的静态资源将输出到dist目录中。如图所示
如图所示
修改nginx配置文件,配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段
server {
listen ;#默认端口是80,如果端口没被占用可以不用修改
server_name localhost; #charset koi8-r; #access_log logs/host.access.log main;
root E:/vue/my_project/dist;#vue项目的打包后的dist location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#.......其他部分省略
}
完成nginx配置后重新加载配置文件,命令如下(ps:需要在安装的根路径下执行):
nginx -s reload
浏览器中访问:http://localhost:8888
通常情况下ngxin是安装到单独的服务器上,因此一般是把vue打包后的dist仍到服务上的具体位置,然后修改nginx.conf的root路径来指向我们的dist。
vue项目 使用nginx代理的更多相关文章
- Linux 部署vue项目(使用nginx)
1.部署Nginx 请参考Linux下部署nginx,此处不再重复 2.Vue项目打包 # 打包正式环境 npm run build:prod # 打包预发布环境 npm run build:stag ...
- vue项目windowServer nginx下部署
https://www.cnblogs.com/jiangwangxiang/p/8481661.html nginx下载地址 http://nginx.org/en/download.html 下载 ...
- vue项目配置及代理解决跨域
axios数据请求 1.下载模块:npm install axios 2.axios特点: 1.支持在浏览器当中发起XMLHttpRequest请求 2.支持Promise 3.自动转换json数据 ...
- vue项目在nginx中不能刷新问题
修改nginx配置文件为 server { listen 80; server_name www.vue.com; root html/xxx/dist/; client_max_body_size ...
- vue项目打包本地后通过nginx解决跨域
前言 有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题.我平时经常用的方法就是 ...
- 阿里云安装Nginx+vue项目部署
阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...
- docker封装vue项目并使用jenkins发布
一.概述 vue项目可以打一个dist静态资源包,直接使用Nginx发布即可. 现在由于要上docker,需要将vue项目和nginx打成一个镜像才行. 项目结构如下: ./ ├── build │ ...
- nginx代理部署Vue与React项目
nginx代理部署Vue与React项目 一,介绍与需求 1.1,介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由 ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
随机推荐
- .net 多线程的使用(Thread)
上篇 net 同步异步 中篇 多线程的使用(Thread) 下篇 net 任务工厂实现异步多线程 Thread多线程概述 上一篇我们介绍了net 的同步与异步,我们异步演示的时候使用的是委托多线程来实 ...
- [css3] 看博客学习别人的旋转的星球
定义一个div 太阳轨道sunline,边框显示出来,定义position为relative #sunline{ width: 500px; height: 500px; border:2px sol ...
- static ,final 、abstract的作用,以及它们的联系和区别
static可以修饰变量,修饰的变量直接属于某各类,不局限于某个方法,无法在成员方法中修饰变量,也不可以在静态方法中修饰变量.被static修饰的方法属于静态方法(类方法),与对象无关,与类有关.fi ...
- sqlserver--install/uninstall
2017 express版本 安装: https://jingyan.baidu.com/article/76a7e409077997fc3a6e1559.html https://www.cnblo ...
- SqlSession对象之StatementHandler
上一篇讲了SqlSession对象中的Executor,接下来将对SqlSession的另一个对象StatementHandler进行讲解. 一.StatementHandler介绍 Statemen ...
- 数组无法使用 forEach() 方法 - 分号的重要性
问题描述: 函数的结构如上图所示,在调用该函数的时候,浏览器报错: 分析原因: 在 js 的语法中,如果语句独占一行,通常可以省略句末的分号 但实际上 js 解析代码的时候,只有在句末缺少分号就无法正 ...
- 本地服务器搭建服务:ftp
开启FTP 服务针对局域网上需要管理的一些文件共享还是有一些帮助的,感兴趣的小伙伴可以尝试下: 1.开启internt 中ftp协议服务 完成即可 -> 可以访问了. tip: UTF-8 选f ...
- 看这一篇就够了,css选择器知识汇总
对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了, ...
- FineReport8.0如何连接FineIndex取数分析
1. 描述 在3.7及之前版本,FineReport连接都是通过安装多维数据集插件,然后通过多维数据库的方式连接FineBI(3.4-3.6对应711,3.7对应8.0),从4.0版本开始,FineR ...
- Sql 中存储过程详细案例
转自:http://www.cnblogs.com/yank/p/4235609.html 概念 存储过程(Stored Procedure):已预编译为一个可执行过程的一个或多个SQL语句. 创建存 ...