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. confluence wiki 安装

    1. 下载 wget https://www.atlassian.com/software/confluence/downloads/binary/atlassian-confluence-5.6.6 ...

  2. mybatis的namespace

    Mybatis的namespace是用来绑定Dao接口的,使用了namespace之后就可以不用写接口实现类,dao接口的方法对应mapper.xml中的sql语句. 详情见:https://blog ...

  3. 20145221 《Java程序设计》第六周学习总结

    20145221 <Java程序设计>第六周学习总结 教材学习内容总结 第十一章部分 - 输入与输出 文件的读写 网络上传数据的基础 同样要先掌握父类中方法,核心类如下: 以上则是老师提出 ...

  4. 如何用js创建表格?

    1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...

  5. 往前端打smarty数据

    $data['hot_issue']=$hotIssue; var_dump($data);

  6. R中的路径设置

    软件的路径设置对于电脑的内存管理和自己的寻根究底十分重要.所以,合理的设置R中相关路径,能更加方便快捷的管理自己的相关文件,提高学习R语言的效率,建立自己的习惯体系. R中的路径设置主要有以下几个方面 ...

  7. lnmp升级php

    引言 服务器用的是lnmp一键安装包,但是php版本是5.5.项目用的是TP5.1需要php5.6的环境. 好慌! 进行升级操作 进入lnmp安装环境 ./upgrade.sh php 然后输入php ...

  8. 在 if 条件句中使用向量

    上述例子的函数中,都只输入了单一值.如果我们提供一个向量,那么这个函数将产生警告,这是因为 if 语句不能与多值向量共存.check_ _positive(c(1,-1,0))## Warning i ...

  9. python2和python3的区别——持续更新

    1.在 cookbook 上看到的,python3支持 *运算符 来接收迭代变量,如: a, *b = [, , , ] python2是不支持的! 2.在 cookbook 上看到的,python3 ...

  10. Appium 自动化测试(8) -- Appium Python client -- API

    最好的学习方法,就是看源码! 在  \appium\webdriver\webdriver.py ,新增了两个封装好定位安卓元素的方法,如  find_element_by_accessibility ...