nginx配置多个vue项目

需求

nginx 下配置多个 vue 项目

举例:

blog: https://www.yoursite.com/blog
test: https://www.yoursite.com/test

vue项目中配置

vue-router 设置 base 路径

base: '/blog/'

config/index.js 修改 assetsPublicPath

assetsPublicPath: '/blog/'

nginx配置

location /blog {
try_files $uri $uri/ /blog/index.html;
}

您可能感兴趣的文章:

  • vue.js项目nginx部署教程
  • nginx部署访问vue-cli搭建的项目的方法
  • nginx+vue.js实现前后端分离的示例代码
  • vue.js使用代理和使用Nginx来解决跨域的问题
  • vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)
  • Nginx 解决WebApi跨域二次请求以及Vue单页面的问题
  • 在nginx上部署vue项目(history模式)的方法
赞 (0)

相关推荐

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • vue.js项目nginx部署教程

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建. 开发环境搭建完成. 二.编译部署 1.项目路径下demo输入命令npm run build 编译完成后会发现在demo文件夹下多出一个dist文件夹这里面就是编译好的文件了. 2.网上下载nginx,下载地址http://nginx.org/en/download.html,解压下载的ngin

  • Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据. 二.原因 第一个O

  • nginx部署访问vue-cli搭建的项目的方法

    nginx部署访问vue-cli搭建的项目的方法

    从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的,而hash是不需要的,只不过地址会多了一个#/的后缀.使用hash模式构建的项目打包后,我只需要使用webstorm之类的软件打开访问就能成功了. 但是我用history模式构建的项目需要借助后台技术,我这里选用的是nginx反向代理来部署项目.具体做法如下: 1.创建后台服务器 对象 upstream mixVueServer{ server baidu.com;#这里是自己服务器域名 } 2

  • vue.js使用代理和使用Nginx来解决跨域的问题

    vue.js使用代理和使用Nginx来解决跨域的问题

    使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一.Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二.修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包

  • vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)

    vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)

    找到nginx多网站配置文件:类似 nginx/sites-available/www.baidu.com server { listen 80; index index.html index.htm index.nginx-debian.html; server_name www.baidu.com; location / { root /mnt/www/www.baidu.com; try_files $uri $uri/ /index.html; } } 参考页面:https://rout

  • nginx+vue.js实现前后端分离的示例代码

    1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

  • nginx配置多个vue项目

    需求 nginx 下配置多个 vue 项目 举例: blog: https://www.yoursite.com/blog test: https://www.yoursite.com/test vue项目中配置 vue-router 设置 base 路径 base: '/blog/' config/index.js 修改 assetsPublicPath assetsPublicPath: '/blog/' nginx配置 location /blog { try_files $uri $ur

  • nginx部署多个vue项目的方法示例

    上一篇已经介绍了然后配置web项目:今天由于公司需求,需要在同一域名端口下,部署两个项目:今天花了一上午终于弄好了,选择赶紧做一个笔记. 如何连接阿里云服务器就不在这里说了,请看我以前的文章. 首先需要的效果 http://47.97.244.83/login http://47.97.244.83/student/login 文件目录 两个项目并列在同一文件夹内. 准备好两个vue的项目 http://47.97.244.83/login:这个不用修改配置直接build就可以.关键是二级域名的

  • nginx通过https部署vue项目的完整步骤

    目录 一.生成证书 进入nginx安装目录 创建ssl文件目录 生成server.key,需要设置两次密码 生成无密码的server.key 创建服务器证书的申请文件 server.csr 生成crt证书文件server.crt 二.nginx配置 三.修改vue配置文件 总结 本篇主要记录vue项目,通过nginx实现https部署的免费方案.主要参考步骤和关键点如下所示. 一.生成证书 进入nginx安装目录 # 进入nginx目录 [root@hecs-402944 nginx]# cd

  • nginx配置多个前端项目实现步骤

    最近一台服务器要配置多个前端项目,当然前后端分离就需要nginx来配置了. 单个项目还好说,如下修改nginx的nginx.conf配置文件 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; pid /usr/local/nginx/logs/nginx.pid; events { worker

  • 使用IDEA工具配置和运行vue项目及遇到的坑

    刚来公司实习发现公司的前端使用的是vue,之前根本就没有听说过.然后一上来就需要看代码,but but 就是没有文档什么的东西,就需要自己去研读,我就想去运行其中的前端和后端联调起来方便理解,结果在配置和运行中出现了很多挫折,我就想写一下方便 大家不去采坑,直接运行好 一.在IDEA中配置vue插件 点击File-->Settings-->Plugins-->搜索vue.js插件进行安装,下面的图中我已经安装好了. 二.搭建node.js环境 安装node.js 可以去官网下载:安装过程

  • ubuntu中利用nginx部署vue项目的完整步骤

    ubuntu中利用nginx部署vue项目的完整步骤

    目录 1.安装nginx 2.打包上传vue项目到服务器 配置nginx 访问vue项目 常见错误 总结 1.安装nginx 更新源列表 apt-get update 安装nginx apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 启动nginx server nginx restart 在浏览器输入ip地址,若出现如下页面则启动成功 2. 打包上传vue项目到服务器 打包 我的项目使用的是vs code,在终端输入如下

  • Vue项目中对index.html中BASE_URL的配置方式

    Vue项目中对index.html中BASE_URL的配置方式

    目录 Vue项目对index.html中BASE_URL的配置 问题 解决 Vue项目url中的<%= BASE_URL %> Vue项目对index.html中BASE_URL的配置 问题 有时候后端配置资源的默认访问路径的时候,可能会与前端打包时配置的默认根路径有所差异 比如:后端要访问静态资源的根路径为/static,而一般情况下,我们项目的vue.config.js中对BAES_URL的配置是/,或者不做配置,因为它默认的值也是/ 这个路径决定了我们的前端项目打包后获取静态资源的默认的

  • django项目、vue项目部署云服务器的详细过程

    django项目、vue项目部署云服务器的详细过程

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目部署 django项目部署 项目依赖安装 数据库配置 使用uwsgi启动django 后端样式处理 上线架构图 服务器购买与远程连接 服务器可以在阿里云控制台首页 (aliyun.com).登录 - 腾讯云 (tencent.com)购买. 这里我选择购买阿里云的云服务器ECS,购买时按自己需求,镜

  • vue项目中用cdn优化的方法

    在我们写项目中,优化问题是不容忽视的,尤其是首屏优化更是重中之重,这里介绍两种方法优化方法--cdn和异步加载,异步请看 http://www.jb51.net/article/110661.htm 1.cdn 首先cdn是什么,自己百度哦 其作用是:当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且.浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代码,如果我们采用cdn的方式来引入一些第三方资源

  • 实例详解Vue项目使用eslint + prettier规范代码风格

    团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格.因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格. 幸好,我们有 eslint 和 prettier . eslint VS prettier 应该大多数项目都已经采用eslint来对代码进行质量检查,可能少部分还会采用其进行一定程度上的统一风格.那为什么还需要prettier呢?我们先来对它们作一个简单的了解. 各种linters 总体来说,linters有两种能力

随机推荐