1、修改 router/index.js

添加一行

base: 'admin',

2、然后修改 config/index.js

增加一行

const assetsPublicPath = '/admin/'

然后修改 下面两处  assetsPublicPath 的值为定义的变量

3、部署时,通过NGINX的反向代理

首先,给需要部署的项目定义一个 NGINX 的 server

    server {
listen ;
location / {
# vue h5 history mode 时配置
try_files $uri $uri/ /index.html; root /home/html/travel_admin/dist;
index index.html index.htm;
} }

再到配置域名的主配置server上做反向代理

    server {
listen ;
server_name web.zjj7.com;
location / {
# 这里是根目录的项目
try_files $uri $uri/ /index.html;
root /home/html/travel/dist;
index index.html index.htm;
}
     # 这里是需要部署的二级目录应用配置
location ^~/admin/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8001/;
}
}

这要重启NGINX以后,部署就完成了

vue通过(NGINX)部署在子目录或者二级目录实践的更多相关文章

  1. vue history 模式打包部署在域名的二级目录的配置指南

    最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash ...

  2. vue+uwsgi+nginx部署路飞学城

    vue+uwsgi+nginx部署路飞学城   有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码 ht ...

  3. linux vue uwsgi nginx 部署路飞学城 安装 vue

    vue+uwsgi+nginx部署路飞学城 有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码#这个代码 ...

  4. Vue 之 Nginx 部署

    nginx 下载地址:http://nginx.org/en/download.html 下载后直接解压,cmd 进入到解压目录运行 start nginx 即可启动 常用命令: nginx -s s ...

  5. Nginx 前端项目配置 包含二级目录和接口代理

    Nginx是目前用的比较多的一个前端服务器 其优点是配置简单修改一下server就能用 并发性能比较好,具体怎么好就看这个吧 开撸 1.找到nginx (liunx系统,已安装) whereis ng ...

  6. 修改vue的配置项支持生产环境下二级目录访问的方法

    本文主要记录如何配置vue的打包文件配置项,使打包后的文件可以支持二级目录的访问. 1.常规打包 在实际的项目中,我们通常都使用 npm run build 直接打包文件后丢到服务器上访问 打包后的文 ...

  7. vue+uwsgi+nginx部署luffty项目

    在部署项目之前本人已经将前端代码和后端代码发布在了一个网站上,大家可自行下载,当然如果有Xftp工具也可以直接从本地导入. django代码 https://files.cnblogs.com/fil ...

  8. vue+uwsgi+nginx部署前后端分离项目

    前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求. django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染 后端 创建虚拟环境 解决dj ...

  9. vue+uwsgi+nginx部署项目

    首先先下载好前后端项目 先从前端vue搞起 要在服务器上,编译打包vue项目,必须得有node环境 下载node二进制包,此包已经包含node,不需要再编译 wget https://nodejs.o ...

随机推荐

  1. 项目:Android平台txt阅读软件

    项目:Android平台txt阅读软件 项目组成员:20145107李长达.20145110屠轶成.20145120黄玄曦.20145122程智崟 Need: 从古至今,阅读都是人类生活中的一大部分, ...

  2. InstallShield 2015 LimitedEdition VS2012 运行bat文件

    转载:http://www.cnblogs.com/fengwenit/p/4271150.html  运行bat文件 网上很多介绍如何运行bat的方法,但我这个是limted 版本,不适用. 1. ...

  3. Bzoj 4371: [IOI2015]sorting排序 二分

    题目 似乎很久没写题解了... 这题是校里胡策的时候的题,比赛因为评测机有点慢+自己代码常数大没快读...被卡t了,但是bzoj上还是A了的...,因为bzoj时限比较宽可以不卡常. 题解: 首先可以 ...

  4. hexo + Github 搭建问题综述

    1.Mac下安装hexo Error: Cannot find module './build/Release/DTraceProviderBindings 解决: solution 2.node s ...

  5. 图像添加logo水印函数

    <?php //图像添加水印函数 /** *为一张图片添加上一个logo水印(以保存新图片的方式实现) *@param string $picname 被缩放的处理图片源 *@param int ...

  6. Android:你好,androidX!再见,android.support

    1.AndroidX简介 点击查看Android文档中对androidx的简介 按照官方文档说明 androidx 是对 android.support.xxx 包的整理后产物.由于之前的suppor ...

  7. 【源码学习之spark core 1.6.1 standalone模式下的作业提交】

    说明:个人原创,转载请说明出处 http://www.cnblogs.com/piaolingzxh/p/5656876.html 未完待续

  8. m_Orchestrate learning system---网站的语言选择功能(中文英文)

    m_Orchestrate learning system---网站的语言选择功能(中文英文) 一.总结 一句话总结:有两种方法,一是session+js端代码,而是session+php端代码. 推 ...

  9. SpringBoot全局异常处理方式

    每个项目全局异常处理非常重要, 今天在处理项目架构的时候添加了一个全局异常处理. 大概三种异常情况: 一:在进入Controller之前,譬如请求一个不存在的地址,404错误. 二:在执行@Reque ...

  10. 安装pip最简单的方法

    http://blog.csdn.net/lyj_viviani/article/details/70568434