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. 2018-2019-1 20189215《Linux内核原理与分析》第三周作业

    <庖丁解牛>第二章书本知识总结 函数调用框架 call指令有两个作用: (1) 将CS:EIP中下一条指令的地址A保存在栈顶: (2)设置CS:EIP指向被调用程序的第一行. ret指令在 ...

  2. php+mysql 注入基本过程

    当mysql版本>5.0时我们只需要访问information_schema库即可查询数据库的相关概要信息,而对于<5.0的版本则需要爆破,今天我们测试的环境是mysql 5.5.40,对 ...

  3. sql注入分析

    输入 1:sql为:select * from users where id = 1; 输入'测试:回显:You have an error in your SQL syntax; check the ...

  4. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  5. C++函数的返回值——返回引用类型&非引用类型

    函数的返回主要分为以下几种情况: 1.主函数main的返回值: 允许主函数main没有返回值就可结束:可将主函数main返回的值视为状态指示器,返回0表示程序运行成功,其他大部分返回值则表示失败. 2 ...

  6. IDEA上面如何添加创建的文件类型

    首先在IDEA --> new 一个文件的时候 以 创建vue文件为例子,来添加vue文件类型文件 选项 edit file templates 添加 这样就OK了 转载需注明出处,谢谢! au ...

  7. Codeforces Round #419 (Div. 2) B. Karen and Coffee(经典前缀和)

    http://codeforces.com/contest/816/problem/B To stay woke and attentive during classes, Karen needs s ...

  8. UVa 11609 组队(快速幂)

    https://vjudge.net/problem/UVA-11609 题意: 有n个人,选一个或多个人参加比赛,其中一名当队长,有多少种方案?如果参赛者完全相同,但队长不同,算作不同的方案. 思路 ...

  9. python 返回列表中的偶数

    def is_even_num(l): enum = [] for n in l: == : enum.append(n) return enum print(is_even_num([, , , , ...

  10. iOS开发网络篇—Socket编程

    一.网络各个协议:TCP/IP.SOCKET.HTTP等 网络七层由下往上分别为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 其中物理层.数据链路层和网络层通常被称作媒体层,是网络工程 ...